1) Wrap your App inside SnackbarProvider
`javascript
import { SnackbarProvider } from 'snackfy';
`
2) Import useSnackbar, this hook has two methods "enqueueSnackbar" and "closeSnackbar". the method "enqueueSnackbar" returns the snackbar id that can be provided to "closeSnackbar" if needed.
`javascript
import { useSnackbar } from 'snackfy';
const handleClick = () => {
enqueueSnackbar({
message: 'This is an awesome Snackbar!'
});
};
return (
);
}
``
Props
$3
| Property | Type | Default | Description |
| ------------------- | ------------------- | ------------------- | ------------------- |
| maxSnacks | number | 3 | Maximum amount of snackbars that will be displayed at same time (recommended to keep the maximum to 3 snackbars) |
| placement | placement object | undefined | Object that determines the vertical and horizontal placement |
| customIcon | any | undefined | Property that replace the default snackbar icon |
| customDismiss | any | undefined | Property to replace the default dismiss icon |
| customStyle | custom style object | undefined | Object that replace the default style for all snackbars |
$3
| Property | Type | Default | Description |
| ------------------- | ------------------- | ------------------- | ------------------- |
| vertical | 'top' or 'bottom' | | Prop that determines the vertical placement |
| horizontal | 'left' or 'center' or 'right' | | Props that determines the horizontal placement |
| Property | Type | Default | Description |
| ------------------- | ------------------- | ------------------- | ------------------- |
| message | string | | Message that will be displayed in the snackbar |
| actions | object (Actions) | | Object that contains the actions (max: 2), for each action will be generated a button |
| options | object (Options) | | Object that contains the options to customize your snackbars |
$3
| Property | Type | Default | Description |
| ------------------- | ------------------- | ------------------- | ------------------- |
| first | object (Action)| | This is required only if actions is set on enqueueSnackbar and receive an action object (see below) |
| second | object(Action) | | The second action is not required and receive an action object |
$3
| Property | Type | Default | Description |
| ------------------- | ------------------- | ------------------- | ------------------- |
| countdown | number | 5000 | The amount of milliseconds the snackbar will remain open |
| persist | boolean | false | If set to true, the snackbar will never be closed, unless if you pass the id to closeSnackbar or set dismissible to true (see more below) |
| dismissible | boolean | false | Set to true to show a close icon (x) in the snackbar that closes the snackbar when pressed|
| variant | 'sucess' or 'error' or 'warning' or 'info' | | Apply the variant style to the snackbar |
| customIcon | any | undefined | Property that replace the default snackbar icon (will override Provider customIcon) |
| customDismiss | any | undefined | Property to replace the default dismiss icon (will override Provider customDismiss) |
| customStyle | custom style object | undefined | Object that replace the default style for all snackbars (will override Provider customStyle) |
$3
| Property | Type | Default | Description |
| ------------------- | ------------------- | ------------------- | ------------------- |
| name | string| | The action name that will be displayed in the button |
| action | Function | | The action that will be triggered when the button is pressed |
Contributing
Pull requests are welcome. If you have any trouble, open an issue and I will solve soon as possible.