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>);
};

Preview:

Download Details:

Author: OlegWock

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/OlegWock/react-local-toast

License: MIT