- Notifications
You must be signed in to change notification settings - Fork4
🍞 An accessible and beautiful notification library for React.
License
NotificationsYou must be signed in to change notification settings
pheralb/toast
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
An accessible notification library for React.
Documentation ✦ Getting Started ✦ Contribute ✦ Roadmap ✦ License
- 🍂 Lightweight.
- ✅ Accessible.
- 🎨 Light, dark & system theme mode.
- ⏲️ Don't close automatically when the user hover over the toast.
- 🏗️ Customizable toast position.
- 🍃 Disable transitions if the user has disabled them in the system.
- 💙 Built completely with Typescript.
- 🎨 Notification Design byMedusa.js UI Framework.
- 🛠️ Typescript API bySonner.
- 🪄Phosphor Icons for success, error, warning, info & loading icons.
Important
This library requiresReact v18 or higher.
- Install the library:
# Using npm:npm install @pheralb/toast# Using pnpm:pnpm add @pheralb/toast# Using yarn:yarn install @pheralb/toast
- Add the toast provider:
// 📃 root.tsximport{Toaster}from"@pheralb/toast";ReactDOM.createRoot(document.getElementById("root")!).render(<React.StrictMode><App/><Toaster/></React.StrictMode>,);
- Usage:
// 📃 index.tsximport{toast}from"@pheralb/toast";exportdefaultfunctionIndex(){return(<><buttononClick={()=>toast.success({text:"pheralb/toast",description:"✨ A beautiful toast library for React",})}><span>Render a toast</span></button></>);}
Tip
📚 Visit theDocumentation for more information.
- 🚗 Add
.loadingvariant. - 📚 Add support for Astro + React.
- ✨ Export bundled & minified
.cssfile. - 🎨 Add support to customize the default styles for greater flexibility and adaptability.
pheralb/toast is a monorepo built withTurbo and it uses:
- Website: Next.js 15 + Content-Collections + MDX + shadcn/ui + Lucide + React-Symbols.
- Library: React 19 with tsup + Lightning CSS + Vitest for testing.
Click here to fork the repository.
Install dependencies:
# Install pnpm globally if you don't have it:npm install -g pnpm# and install dependencies:pnpm install
- Commands:
# Run only documentation website:pnpm dev:docs# Run all website + packages:pnpm dev# Build the docs & library:pnpm build# Test the library:pnpmtest
🧑🚀 Openhttp://localhost:3000 to view theNext.js documentation website.
and create a pull request with your features or fixes 🚀✨.
MIT License -pheralb 2024.
About
🍞 An accessible and beautiful notification library for React.
Topics
Resources
License
Stars
Watchers
Forks
Packages0
No packages published