A lightweight, customizable toast notification library for React.
Built for React using React, TypeScript, Framer Motion for animation and SCSS for styling.
Test it out in this custom playground built for react-floatify : https://toasty-playground-ten.vercel.app/
- Multiple toast types:
success,error,warning,default - Variants:
regular,outlined,contained - Adjustable spacing, shadows, position and pop-in-out directions
- Configurable duration + optional progress bar
- Option to disable animations
- Customizable
fontSizeandiconSize - Override styles using
sx - Tiny, tree-shakable, easy to use
npm install react-floatifyWrap your app with the ToastProvider:
import React from "react"; import ReactDOM from "react-dom/client"; import App from "./App"; import { ToastProvider } from "react-floatify"; ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <ToastProvider> <App /> </ToastProvider> </React.StrictMode> );Import CSS and Trigger a toast with the useToast hook:
import { useToast } from "react-floatify"; import "react-floatify/dist/react-floatify.css"; function Example() { const { addToast } = useToast(); return ( <button onClick={() => addToast("Hello World!", { type: "success", variant: "contained", spacing:"regular", duration: 4, fontSize: 16, iconSize: 20, showProgress: true, }) } > Show Toast </button> ); }If you’re using TypeScript and your type or variant values come from component state, you should import the provided types to get full type safety:
import { useToast, type ToastType, type ToastVariant } from "react-floatify"; const [type, setType] = useState<ToastType>("default"); const [variant, setVariant] = useState<ToastVariant>("regular");| Option | Type | Default | Description |
|---|---|---|---|
type | "success" | "error" | "warning" | "default" | "default" | Toast style |
variant | "regular" | "outlined" | "contained" | "regular" | Visual variant |
duration | number | 5 | Duration in seconds |
spacing | "small" | "regular" | "large" | "regular | Message Padding |
disableAnimation | boolean | false | Disable entry/exit animations |
elevation | number | 3 | Box Shadow on Toast Container |
showProgress | boolean | true | Show progress bar |
slideFrom | "left"|"right"|"bottom"|"top" | "right" | Slide-from direction (slides back into that direction) |
position | "top left"|"top right"|"top center"|"bottom left" | "bottom right"|"bottom center" | Position on Screen |
showProgress | boolean | true | Show progress bar |
showIcon | boolean | true | Show Icon (type: "default" has no icon) |
fontSize | string | number | 14 | Font size for message text |
iconSize | number | 17 | Icon size |
sx | React.CSSProperties | {} | Inline style overrides |
<ToastProvider position="bottom center">...</ToastProvider>Each toast is rendered inside a .Toast-stack-modal.
The basic DOM structure looks like this for a toast with type:"success", variant:"regular", iconSize:17, spacing:"regular" and showProgress:true:
<div class="Toast-stack-modal"> <div class="Toasty-container success regular"> <div class="Toasty-message regular-spacing"> <CheckCircle size={17}/> // lucide-react icon Welcome to Floatify </div> <div class="Toasty-progress-container"> <div class="Toasty-progress-bar success"></div> </div> </div> </div>