Nicely Pointed Mandibles

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

    1.0.3 • Public • Published

    React Toast

    React Toast

    Minimal toast notifications for React.

    Get started

    Quick start

    Install with yarn

    yarn add react-toast

    Install with NPM

    npm install react-toast
    import { ToastContainer, toast } from 'react-toast'
    
    const App = () => {
      const wave = () => toast('Hi there 👋')
    
      return (
        <div>
          <button onClick={wave}>Say hi!</button>
          <ToastContainer />
        </div>
      )
    }

    Demo

    Demo on CodeSandbox.

    Docs

    Toast Container

    To use react-toast, you need to put ToastContainer in a top-level component in your application. e.g. App.js

    It can take some props, here's a list of them:

    Props Type Description Default
    position top-left | top-center | top-right | bottom-left | bottom-center | bottom-right position of toast bottom-left
    deplay (ms) number delay for toast 6000

    Toast

    There are 4 base toast type available, success, error, info and warn. For instance:

    const success = () => toast.success('Message sent successfully!')

    or

    fetch('someRandomUrl')
      .then(res => res.json())
      .then(res => console.log(res))
      .catch(err => toast.error(err.message))

    Custom toast

    You can display custom styled toasts, here's an example and a list of options that are available for customization:

    const customToast = () =>
      toast('Morning! Have a good day.', {
        backgroundColor: '#8329C5',
        color: '#ffffff',
      })
    Property Type Description Default
    backgroundColor string background color of toast based on toast type, e.g. success will be green
    color string color of text in toast #ffffff

    License

    MIT

    Install

    npm i react-toast

    DownloadsWeekly Downloads

    1,308

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    111 kB

    Total Files

    53

    Last publish

    Collaborators

    • moharnadreza