Inline Toast Message Component - react-local-toast

Description:

react-local-toast is a React component that displays an inline toast message attached to any DOM element just like a tooltip or popover.

Supports various types of toast messages like info, success, warning, error, and loading. Accessibility is designed in mind.

How to use it:

1. Install and import the react-local-toast.

# Yarn
$ yarn add react-local-toast
# NPM
$ npm i react-local-toast

// required stylesheet
import 'react-local-toast/dist/bundle.min.css';

2. Wrap your application in LocalToastProvider.

import React from 'react';
import { LocalToastProvider } from 'react-local-toast';
export default () => {
  return (<LocalToastProvider>
    <App />
  </LocalToastProvider>);
};

3. Attach an inline toast to your element.

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

export const App = () => {
  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>);
};