@marcoparrone/snackbar
v1.0.3
Published
Snackbar material react component.
Downloads
2
Readme
snackbar
Snackbar material react component.
Installation
npm install @marcoparrone/snackbar
Usage
import {Snackbar, open_snackbar} from '@marcoparrone/snackbar';
Read further for more information.
Creating a snackbar
For creating a snackbar now you can use the Snackbar react component. It accepts just the "id" property:
- id: a string containing an identifier for the snackbar;
Here is an example of a snackbar:
<Snackbar id="mustBeNum">{this.i18n.text['text_snack_mustbenum']}</Snackbar>
In the above example, this.i18n.text['text_snack_mustbenum'] contains the localized message to show in the snackbar.
Showing a snackbar
The snackbars are hidden, to show them you can use the open_snackbar function.
The function accepts two parameters: a reference to some element containing the snackbar (it could be a reference to the top element of the react app), created with React.createRef(), and a string containing the id of the snackbar.
Here is an example:
// ...
class NotesList extends React.Component {
// ...
constructor(props) {
// ...
this.notesListRef = React.createRef();
// ...
handleSettingsChange(e) {
let tmpint = 0;
// ...
case 'textarearows':
if (isNaN(e.target.value) || e.target.value === "") {
open_snackbar (this.notesListRef, 'mustBeNum');
} else {
// ...
render() {
// ...
<AppWithTopBar refprop={this.notesListRef} lang={this.i18n.language} appname={this.i18n.text['text_appname']} /* ... */ >
<Snackbar id="mustBeNum">{this.i18n.text['text_snack_mustbenum']}</Snackbar>
...