## 🪐 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(
,
);
```
3. Usage:
```jsx
// 📃 index.tsx
import { toast } from "@pheralb/toast";
export default function Index() {
return (
<>
);
}
```
> [!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 🚀✨.
## 📃 License
[MIT License](https://github.com/pheralb/toast/blob/main/LICENSE) - [**pheralb**](https://pheralb.dev) 2024.
