react-local-toast

npm version npm downloads

Local toast helps you to provide feedback related to particular components on page

Demo

Features

  • Local toasts are linked to particular component in DOM.
  • Toast can be displayed on right/left/top/bottom side of component.
  • Toast can be hidden after some timout or hidden programatically.
  • Component might have multiple toasts.
  • Multiple toasts stucks vertically (even if displayed on left or right side).
  • info, success, warning, error and loading toasts out of the box.
  • You can bring your own design. Or your own Toast component. Or your custom implementation of toasts.
  • WAI-ARIA support.
  • TypeScript!

Documentation and showcase

Can be found here. Check it out, I spent a lot of effort making it ?.

Installation

npm install react-local-toast --save
# Or if you prefer yarn
yarn add react-local-toast

Basic Usage

For starters, you need to wrap your application in LocalToastProvider.

import React from 'react';
import { LocalToastProvider } from 'react-local-toast';

export default () => {
    return (<LocalToastProvider>
        {/* All your components that will use local toasts should be children of this provider. */}
        <App />
    </LocalToastProvider>);
};

Local toasts are linked to particular components on page, so let’s mark our component as target for local toast:

import React from 'react';
import { LocalToastTarget } from 'react-local-toast';

export const App = () => {
    return (<div>
        <p>This component should be inside LocalToastProvider</p>
        {/* Wrap your component with <LocalToastTarget> */}
        <LocalToastTarget name="btn">
            <button>Click me please!</button>
        </LocalToastTarget>
    </div>);
};

Local toast uses refs to get position of component, so in case you want to use toasts with functional components – make sure they are wrapped in React.forwardRef.

And final piece! Update your component to actually produce local toasts:

import React from 'react';
// New import here !!
import { LocalToastTarget, useLocalToast } from 'react-local-toast';

export const App = () => {
    // Use hook to show and hide toasts
    const {showToast, removeToast} = useLocalToast();

    return (<div>
        <p>This component should be inside LocalToastProvider</p>
        <LocalToastTarget name="btn">
            <button onClick={() => showToast('btn', 'Hello my first toast!')}>Click me please!</button>
        </LocalToastTarget>
    </div>);
};

Cool, huh?

License

MIT

GitHub

View Github