@pheralb/toast
Version:
A lightweight, customizable, and dependency-free notification library for React.
171 lines (127 loc) • 4.65 kB
Markdown
<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 notification library for React.
</b>
</p>
<a href="https://toast.pheralb.dev/">Documentation</a>
<span> ✦ </span>
<a href="https://toast.pheralb.dev/#getting-started">Getting Started</a>
<span> ✦ </span>
<a href="#-contributing">Contribute</a>
<span> ✦ </span>
<a href="#-roadmap">Roadmap</a>
<span> ✦ </span>
<a href="#-license">License</a>
</div>
<div align="center">
[](https://actions-badge.atrox.dev/pheralb/toast/goto?ref=main)
</div>
## 🪐 Features
- [x] 🍂 Lightweight.
- [x] ✅ Accessible.
- [x] 🎨 Light, dark & system theme 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](https://medusajs.com/framework/).
- [x] 🛠️ Typescript API by [**Sonner**](https://sonner.emilkowal.ski).
- [x] 🪄 [**Phosphor Icons**](https://phosphoricons.com/) for success, error, warning, info & loading icons.
## 🚀 Getting Started
> [!IMPORTANT]
> This library requires **React v18** or higher.
1. Install the library:
```bash
# Using npm:
npm install @pheralb/toast
# Using pnpm:
pnpm add @pheralb/toast
# Using yarn:
yarn install @pheralb/toast
```
2. Add the toast provider:
```tsx
// 📃 root.tsx
import { Toaster } from "@pheralb/toast";
ReactDOM.createRoot(document.getElementById("root")!).render(
<React.StrictMode>
<App />
<Toaster />
</React.StrictMode>,
);
```
3. Usage:
```jsx
// 📃 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**](https://toast.pheralb.dev/) for more information.
## 🔭 Roadmap
- [x] 🚗 Add `.loading` variant.
- [x] 📚 Add support for Astro + React.
- [x] ✨ Export bundled & minified `.css` file.
- [x] 🎨 Add support to customize the default styles for greater flexibility and adaptability.
## 🤝 Contributing
[`pheralb/toast`](https://github.com/pheralb/toast) is a monorepo built with [Turbo](https://turbo.build/repo) and it uses:
- [**Website**](https://github.com/pheralb/toast/tree/main/website): Next.js 15 + Content-Collections + MDX + shadcn/ui + Lucide + React-Symbols.
- [**Library**](https://github.com/pheralb/toast/tree/main/library): React 19 with tsup + Lightning CSS + Vitest for testing.
1. [Click here to fork](https://github.com/pheralb/toast/fork) the repository.
2. Install dependencies:
```bash
# Install pnpm globally if you don't have it:
npm install -g pnpm
# and install dependencies:
pnpm install
```
3. Commands:
```bash
# Run only documentation website:
pnpm dev:docs
# Run all website + packages:
pnpm dev
# Build the docs & library:
pnpm build
# Test the library:
pnpm test
```
🧑🚀 Open [`http://localhost:3000`](http://localhost:4321) to view the **Next.js** documentation website.
and create a pull request with your features or fixes 🚀✨.
<a href="https://github.com/pheralb/toast/graphs/contributors">
<img src="https://contrib.rocks/image?repo=pheralb/toast" />
</a>
## 📃 License
[MIT License](https://github.com/pheralb/toast/blob/main/LICENSE) - [**pheralb**](https://pheralb.dev) 2024.