|
1 |
| -## 📦 Installation |
| 1 | +## ✨ Features |
| 2 | + |
| 3 | +- [x] 🍂 Lightweight. |
| 4 | +- [x] ✅ Accessible. |
| 5 | +- [x] 🎨 Light/dark mode. |
| 6 | +- [x] ⏲️ Don't close automatically when the user hover over the toast. |
| 7 | +- [x] 🏗️ Customizable toast position. |
| 8 | + |
| 9 | +## 🛫 Getting Started |
| 10 | + |
| 11 | +> [!IMPORTANT] |
| 12 | +> This library requires **React ^18** installed. |
| 13 | +
|
| 14 | +1. Install the library: |
2 | 15 |
|
3 | 16 | ```bash
|
4 |
| -# Using npm |
| 17 | +# Using npm: |
5 | 18 | npm install @pheralb/toast
|
| 19 | + |
| 20 | +# Using pnpm: |
| 21 | +pnpm add @pheralb/toast |
| 22 | + |
| 23 | +# Using yarn: |
| 24 | +yarn add @pheralb/toast |
6 | 25 | ```
|
7 | 26 |
|
8 |
| -## 🌱 Features |
| 27 | +2. Add the toast provider: |
9 | 28 |
|
10 |
| -- [x] 🍂 Lightweight. |
11 |
| -- [x] 🎨 Light/dark mode. |
12 |
| -- [x] ⏲️ Don't close automatically when the user hover over the toast. |
13 |
| -- [x] 🏗️ Customizable toast position. |
14 |
| -- [x] ✅ Accessible. |
| 29 | +```tsx |
| 30 | +// 📃 main.tsx |
| 31 | +import { ToastProvider } from '@pheralb/toast'; |
| 32 | + |
| 33 | +ReactDOM.createRoot(document.getElementById('root')!).render( |
| 34 | + <React.StrictMode> |
| 35 | + <ToastProvider position="bottom-right"> |
| 36 | + <App /> |
| 37 | + </ToastProvider> |
| 38 | + </React.StrictMode>, |
| 39 | +); |
| 40 | +``` |
| 41 | + |
| 42 | +3. Usage: |
| 43 | + |
| 44 | +```jsx |
| 45 | +// 📃 index.tsx |
| 46 | +export default function Index() { |
| 47 | + const toast = useToast(); |
| 48 | + return ( |
| 49 | + <> |
| 50 | + <button |
| 51 | + onClick={() => |
| 52 | + toast.open({ |
| 53 | + text: 'pheralb/toast', |
| 54 | + description: '✨ A beautiful toast library for React', |
| 55 | + variant: 'success', |
| 56 | + }) |
| 57 | + } |
| 58 | + > |
| 59 | + <span>Render a toast</span> |
| 60 | + </button> |
| 61 | + </> |
| 62 | + ); |
| 63 | +} |
| 64 | +``` |
| 65 | + |
| 66 | +> [!TIP] |
| 67 | +> 📚 Visit the [**Getting Started**](https://toast.pheralb.dev/) guide to view the full documentation and set up with other frameworks like Next.js, Remix or Astro. |
| 68 | +
|
| 69 | +## 🤝 Contributing |
| 70 | + |
| 71 | +[`pheralb/toast`](https://github.com/pheralb/toast) is a monorepo built with [Turbo](https://turbo.build/repo) and it uses: |
| 72 | + |
| 73 | +- [**Library**](https://github.com/pheralb/toast/tree/main/library): React 18 with tsup. |
| 74 | +- [**Website**](https://github.com/pheralb/toast/tree/main/website): Remix, shadcn/ui + Tailwind CSS + Radix & MDX. |
| 75 | + |
| 76 | +1. [Click here to fork](https://github.com/pheralb/toast/fork) the repository. |
| 77 | +2. Install dependencies: |
| 78 | + |
| 79 | +```bash |
| 80 | +# Install pnpm globally if you don't have it: |
| 81 | +npm install -g pnpm |
| 82 | + |
| 83 | +# and install dependencies: |
| 84 | +pnpm install |
| 85 | +``` |
| 86 | + |
| 87 | +3. Run monorepo: |
| 88 | + |
| 89 | +``` |
| 90 | +pnpm dev |
| 91 | +``` |
| 92 | + |
| 93 | +and create a pull request with your features or fixes 🚀✨. |
| 94 | + |
| 95 | +## 📃 License |
| 96 | + |
| 97 | +- [MIT License](https://github.com/pheralb/toast/blob/main/LICENSE). |
0 commit comments