This is custom toast component implemented by react hooks + React Context API

Usage no npm install needed!

<script type="module">
  import reactToastNotify from '';


React Toast Component

This is custom toast component implemented by react hooks + React Context API


React Toast Component

Online Demo


This is custom toast component implemented by react hooks + React Context API and stayled using tailwindCSS framework. Feel free to inspirate by implementation :) This is trim of my UI lib that i use for my projects.

This componnent allow to push notifications to user screen and auto remove it after set or default time..

Example implements this push-Events:

  • Info
  • Error
  • Warning
  • Success
  • Custom body


  • Responsive
  • Using Hooks and Context API
  • Using Tailwind and Fontawesome (All can be adjusted by endpoint user)


  1. Clone the repo
    git clone
  2. Restore packages
    yarn install
  3. Build and run demo
    yarn run start

Configuration API

Toast Provider

  • Usually placed in Providers.tsx or on top of App.tsx
  • Give you access to toast
  • In this example toast are send from "HomePage"
<ToastProvider variant={"top-right"}>
    <HomePage />

Use hook to access toast actions

// Custom hook to access default context
const toast = useToast();
// OR
// Use of concrete conetxt
const toast = useContext(ToastContext);


export default function HomePage() {
  const toast = useToast();

  return (
        onClick={() => toast?.pushError("Oppps Error", 5000)}

Various types to push

toast?.pushError("Error messgae", 5000);
toast?.pushWarning("Warning message"); // Default timeValue
toast?.pushSuccess("Success message");
toast?.pushInfo("Info Message");
toast?.push("Message", "Info", 2000);
toast?.pushCustom(<ToastCustomMessage />, 2000);
toast?.pushError("Error messgae", 5000, "truncate-2-lines");

Predefined types (can be extended)

type TostMessageType = "Info" | "Success" | "Warning" | "Error";

Support message truncate trim

type Truncate = "truncate-1-lines" | "truncate-2-lines" | "truncate-3-lines";

Pass any custom React.ReactNode component to body

toast?.pushCustom(<ToastCustomMessage />, 2000);
toast?.pushCustom(<div>My custom body</div>, 2000);

Various toast position

<ToastProvider variant={"top-right"}>
 // ...

type Position "top_right" | "top_middle" | "top_left" | "bottom_right" | "bottom_middle" | "bottom_left"


For valid display check that your React "root" is flexible and fulscreen to support all browsers behaviour...

// public/index.html
<div class="flex h-full w-full" id="root"></div>


You can read setp-by-step tutorial if you wanna start from scratch. (Currently writting / Not finished).


This project is licensed with the MIT license.