snackfy
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.0 • Public • Published

    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>
    1. 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

    e-mail

    instagram

    Install

    npm i snackfy

    DownloadsWeekly Downloads

    2

    Version

    1.2.0

    License

    ISC

    Unpacked Size

    46.8 kB

    Total Files

    20

    Last publish

    Collaborators

    • avatar