Socket
Socket
Sign inDemoInstall

react-toast-notifications

Package Overview
Dependencies
68
Maintainers
1
Versions
32
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-toast-notifications

A configurable, composable, toast notification system for react.


Version published
Maintainers
1
Weekly downloads
54,918
decreased by-4.62%

Weekly downloads

Readme

Source

🚨 Not Maintained

This was a great project to learn from and fulfilled the requirements it set out to. Unfortunately, I can no-longer give this project the time it needs. Consider react-hot-toast as an alternative, or look at the source and make your own 🎉 (there really isn't much to it).

No Maintenance Intended


react-toast-notifications

React Toast Notifications

A configurable, composable, toast notification system for react.

https://jossmac.github.io/react-toast-notifications

Install

yarn add react-toast-notifications

Use

Wrap your app in the ToastProvider, which provides context for the Toast descendants.

import { ToastProvider, useToasts } from 'react-toast-notifications';

const FormWithToasts = () => {
  const { addToast } = useToasts();

  const onSubmit = async value => {
    const { error } = await dataPersistenceLayer(value);

    if (error) {
      addToast(error.message, { appearance: 'error' });
    } else {
      addToast('Saved Successfully', { appearance: 'success' });
    }
  };

  return <form onSubmit={onSubmit}>...</form>;
};

const App = () => (
  <ToastProvider>
    <FormWithToasts />
  </ToastProvider>
);

ToastProvider Props

For brevity:

  • PlacementType is equal to 'bottom-left' | 'bottom-center' | 'bottom-right' | 'top-left' | 'top-center' | 'top-right'.
  • TransitionState is equal to 'entering' | 'entered' | 'exiting' | 'exited'.
PropertyDescription
autoDismissTimeout numberDefault 5000. The time until a toast will be dismissed automatically, in milliseconds.
autoDismiss booleanDefault: false. Whether or not to dismiss the toast automatically after a timeout.
children NodeRequired. Your app content.
components { ToastContainer, Toast }Replace the underlying components.
newestOnTop booleanDefault false. When true, insert new toasts at the top of the stack.
placement PlacementTypeDefault top-right. Where, in relation to the viewport, to place the toasts.
portalTargetSelector stringWhich element to attach the container's portal to. Uses document.body when not provided.
transitionDuration numberDefault 220. The duration of the CSS transition on the Toast component.

Toast Props

PropertyDescription
appearanceUsed by the default toast. One of success, error, warning, info.
childrenRequired. The content of the toast notification.
autoDismiss booleanInherited from ToastProvider if not provided.
autoDismissTimeout numberInherited from ToastProvider.
onDismiss: Id => voidPassed in dynamically. Can be called in a custom toast to dismiss it.
placement PlacementTypeInherited from ToastProvider.
transitionDuration numberInherited from ToastProvider.
transitionState: TransitionStatePassed in dynamically.

Hook

The useToast hook has the following signature:

const {
  addToast,
  removeToast,
  removeAllToasts,
  updateToast,
  toastStack,
} = useToasts();

The addToast method has three arguments:

  1. The first is the content of the toast, which can be any renderable Node.
  2. The second is the Options object, which can take any shape you like. Options.appearance is required when using the DefaultToast. When departing from the default shape, you must provide an alternative, compliant Toast component.
  3. The third is an optional callback, which is passed the added toast ID.

The removeToast method has two arguments:

  1. The first is the ID of the toast to remove.
  2. The second is an optional callback.

The removeAllToasts method has no arguments.

The updateToast method has three arguments:

  1. The first is the ID of the toast to update.
  2. The second is the Options object, which differs slightly from the add method because it accepts a content property.
  3. The third is an optional callback, which is passed the updated toast ID.

The toastStack is an array of objects representing the current toasts, e.g.

[
  {
    content: 'Something went wrong',
    id: 'generated-string',
    appearance: 'error',
  },
  { content: 'Item saved', id: 'generated-string', appearance: 'success' },
];

Replaceable Components

To bring each toast notification inline with your app, you can provide alternative components to the ToastProvider:

import { ToastProvider } from 'react-toast-notifications';

const MyCustomToast = ({ appearance, children }) => (
  <div style={{ background: appearance === 'error' ? 'red' : 'green' }}>
    {children}
  </div>
);

const App = () => (
  <ToastProvider components={{ Toast: MyCustomToast }}>...</ToastProvider>
);

To customize the existing component instead of creating a new one, you may import DefaultToast:

import { DefaultToast } from 'react-toast-notifications';
export const MyCustomToast = ({ children, ...props }) => (
  <DefaultToast {...props}>
    <SomethingSpecial>{children}</SomethingSpecial>
  </DefaultToast>
);

Alternatives

This library may not meet your needs. Here are some alternative I came across whilst searching for this solution:

Keywords

FAQs

Last updated on 08 Jul 2021

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc