@pheralb/toast
v0.2.3
Published
<div align="center"> <a href="https://toast.pheralb.dev"> <img src="https://toast.pheralb.dev/images/logo_svg.svg" alt="@pheralb/toast" height="60" /> </a> <p /> <p> <b> An accessible toast library for React.
Downloads
160
Maintainers
Readme
Documentation ✦ Getting Started ✦ Contribute ✦ Roadmap ✦ License
🪐 Features
- [x] 🍂 Lightweight.
- [x] ✅ Accessible.
- [x] 🎨 Light/dark mode.
- [x] ⏲️ Don't close automatically when the user hover over the toast.
- [x] 🏗️ Customizable toast position.
- [x] 🍃 Disable transitions if the user has disabled them in the system.
- [x] 💙 Built completely with Typescript.
✨ Inspiration
- [x] 🎨 Notification Design by Medusa.js UI Framework.
- [x] 🛠️ Typescript API by Sonner.
- [x] 🪄 Phosphor Icons for success, error, warning, info & loading icons.
🚀 Getting Started
[!IMPORTANT] This library requires React 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.tsx
import { Toaster } from '@pheralb/toast';
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<App />
<Toaster />
</React.StrictMode>,
);
- Usage:
// 📃 index.tsx
import { toast } from '@pheralb/toast';
export default function Index() {
return (
<>
<button
onClick={() =>
toast.success({
text: 'pheralb/toast',
description: '✨ A beautiful toast library for React',
})
}
>
<span>Render a toast</span>
</button>
</>
);
}
[!TIP] 📚 Visit the Documentation for more information.
🔭 Roadmap
- [x] 🚗 Add
.loading
variant. - [x] 📚 Add support for Astro + React.
- [ ] 🎨 Add rich colors support.
🤝 Contributing
pheralb/toast
is a monorepo built with Turbo and it uses:
- Docs: Astro Content Collections, shadcn/ui + Tailwind CSS & MDX.
- Library: React 18 with tsup + Vitest for testing.
- Examples: Frameworks to test the library.
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 packages with examples:
pnpm dev
# Build the docs & library:
pnpm build
# Test the library:
pnpm test
- 🧑🚀 Open
http://localhost:4321
to view the Astro documentation website. - 🔎 Open
http://localhost:3000
to view the Next.js playground. Only for test the functionality of the library.
and create a pull request with your features or fixes 🚀✨.
📃 License
MIT License - pheralb 2024.