Snackfy NPM | npm.io

Snackfy

Snackfy is a notification provider for React that can easily show, stack up, queue and customize notifications inside your react app.

snackfy

Installation

Use npm package manager to install snackfy.

npm install snackfy

Basic usage

1) Wrap your App inside SnackbarProvider

import { SnackbarProvider } from 'snackfy';

<SnackbarProvider>
  <App/>
</SnackbarProvider>

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.

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	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)