Snackfy
Snackfy is a notification provider for React that can easily show, stack up, queue and customize notifications inside your react app.
Installation
Use npm package manager to install snackfy.
Basic usage
- Wrap your App inside SnackbarProvider
import { SnackbarProvider } from 'snackfy';
<SnackbarProvider>
<App/>
</SnackbarProvider>
- 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.
import { useSnackbar } from 'snackfy';
const MyComponent = () => {
const { enqueueSnackbar } = useSnackbar();
const handleClick = () => {
enqueueSnackbar({
message: 'This is an awesome Snackbar!'
});
};
return (
<Button onClick={handleClick}>Show snackbar</Button>
);
}
Props
SnackbarProvider
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 |
placement props (object prop from SnackbarProvider)
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 |
custom style props (object prop from SnackbarProvider and enqueueSnackbar options)
Property |
Type |
Default |
Description |
default |
React.CSSProperties |
undefined |
Prop that overides snackbar default style |
success |
React.CSSProperties |
undefined |
Prop that overides snackbar success variant default style |
error |
React.CSSProperties |
undefined |
Prop that overides snackbar error variant default style |
warning |
React.CSSProperties |
undefined |
Prop that overides snackbar warning variant default style |
info |
React.CSSProperties |
undefined |
Prop that overides snackbar info variant default style |
enqueueSnackbar props (returns id type: number)
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 |
actions props (object prop from enqueueSnackbar)
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 |
options props (object prop from enqueueSnackbar)
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) |
action props (object prop from actions)
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.
Author
Bruno Kurt