Lightweight React toast notification library
npm install toasts-reactA lightweight, dependency-free React toast notification library with built-in CSS-in-JS style injection, optimized for modern React apps.
---
This library does not bundle React. You must install the following peer dependencies:
``bash`
npm install react react-dom
Required versions:
`json`
"peerDependencies": {
"react": "^19.2.3",
"react-dom": "^19.2.3"
}
> ✅ This ensures compatibility across multiple React projects without version conflicts.
---
`bash`
npm install toasts-react
or
`bash`
yarn add toasts-react
---
Wrap your root application with ToastProvider.
`jsx
import React from "react";
import ReactDOM from "react-dom/client";
import { ToastProvider } from "toasts-react";
import App from "./App";
ReactDOM.createRoot(document.getElementById("root")).render(
);
`
> ⚠️ Important:
> ToastProvider must be added once, preferably at the app root.
---
`jsx
import React from "react";
import { ToastProvider, useToast } from "toasts-react";
const Button = () => {
const { success, error, info, warning } = useToast();
const buttonClick = () => {
success("Profile updated successfully");
error("Something went wrong");
info("New update available");
warning("Password is weak");
}
return ;
}
export default function App() {
return (
);
}
`
---
This library uses runtime CSS injection instead of external .css files.
* No global CSS conflicts
* Zero setup required
* Works in SSR & Micro-frontend apps
* Fully tree-shakable
---
On first render of ToastProvider:
1. A