Example Usage

For a live demo and syntax details, please visit React Toast Example.

react-toast-simple

react-toast-simple is a lightweight toast notification library for React applications, designed to provide simple and customizable toast messages.Just 12 kb.

Features

• Supports toast notifications for success, error, info, and custom messages.
• Configurable toast positions: top, bottom, and center.
• Automatic dismissal after a specified duration.

Installation

Install react-toast-simple via npm or yarn:

npm install react-toast-simple
# or
yarn add react-toast-simple

Usage
Wrap your application with the ToastProvider to enable toast notifications:

1 Wrap your application with the ToastProvider---

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { ToastProvider } from 'react-toast-simple';

ReactDOM.render(
  <ToastProvider>
    <App />
  </ToastProvider>,
  document.getElementById('root')
);


-------------------------------------------
import { toast } from 'react-toast-simple';
toast.success('Success message', 'bottomRight');
toast.success('Success message', 'bottomLeft')
please visit [React Toast Example](https://react-toast-brown.vercel.app/).


----------------------------------------------
2 Add toast notifications to your application:
import React from 'react';
import { toast } from 'react-toast-simple';

const positions = [
  'topRight', 'bottomRight', 'topCenter', 
  'topLeft', 'bottomLeft', 'bottomCenter', 'center'
];

const types = [
  { type: 'success', label: 'Success' },
  { type: 'error', label: 'Error' },
  { type: 'info', label: 'Info' }
];

const App = () => {
  return (
    <div>
      {types.map(({ type, label }) => (
        positions.map((position) => (
          <button 
            key={`${type}-${position}`} 
            onClick={() => toast[type](`This is a ${label.toLowerCase()} message!`, position)}
          >
            Show {label} ({position})
          </button>
        ))
      ))}
    </div>
  );
}

export default App;


Toast Types
You can show different types of toast notifications:

Success: toast.success(message, position, duration)
Error: toast.error(message, position, duration)
Info: toast.info(message, position, duration)


Custom Toasts
You can also create custom toasts
<button 
  onClick={() => toast.custom(
    <div style={{ color: 'red', backgroundColor: 'green', height: '300px', width: '800px' }}>
      This is a custom message!
    </div>, 
    'center', 
    6000
  )}
>
  Show Custom Toast
</button>



Positions
Available positions for toast notifications:

topRight
bottomRight
topCenter
topLeft
bottomLeft
bottomCenter
center


Duration
You can specify the duration for which the toast will be visible (default is 3000ms):
toast.success('This is a success message!', 'topRight', 5000);