Inline Toast Message Component – react-local-toast


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 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 />

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>


Inline Toast Message Component - react-local-toast


Add Comment