27 | );
28 | }
29 | ```
30 |
31 | ## Documentation
32 |
33 | You can find out more about the API and implementation in the [Documentation](https://sonner.emilkowal.ski/getting-started).
34 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2023 Emil Kowalski
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/website/src/components/Hero/index.tsx:
--------------------------------------------------------------------------------
1 | import { toast } from 'sonner';
2 |
3 | import styles from './hero.module.css';
4 | import Link from 'next/link';
5 |
6 | export const Hero = () => {
7 | return (
8 |
43 | );
44 | };
45 |
--------------------------------------------------------------------------------
/test/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | ```
14 |
15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16 |
17 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
18 |
19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
20 |
21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
22 |
23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
24 |
25 | ## Learn More
26 |
27 | To learn more about Next.js, take a look at the following resources:
28 |
29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
31 |
32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
33 |
34 | ## Deploy on Vercel
35 |
36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
37 |
38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
39 |
--------------------------------------------------------------------------------
/website/README.md:
--------------------------------------------------------------------------------
1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
2 |
3 | ## Getting Started
4 |
5 | First, run the development server:
6 |
7 | ```bash
8 | npm run dev
9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | ```
14 |
15 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
16 |
17 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
18 |
19 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
20 |
21 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
22 |
23 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
24 |
25 | ## Learn More
26 |
27 | To learn more about Next.js, take a look at the following resources:
28 |
29 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
30 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
31 |
32 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
33 |
34 | ## Deploy on Vercel
35 |
36 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
37 |
38 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
39 |
--------------------------------------------------------------------------------
/src/assets.tsx:
--------------------------------------------------------------------------------
1 | 'use client';
2 | import React from 'react';
3 | import { ToastTypes } from './types';
4 |
5 | export const getAsset = (type: ToastTypes): JSX.Element | null => {
6 | switch (type) {
7 | case 'success':
8 | return SuccessIcon;
9 |
10 | case 'error':
11 | return ErrorIcon;
12 |
13 | default:
14 | return null;
15 | }
16 | };
17 |
18 | const bars = Array(12).fill(0);
19 |
20 | export const Loader = ({ visible }: { visible: boolean }) => {
21 | return (
22 |
71 | );
72 | };
73 |
--------------------------------------------------------------------------------
/website/src/pages/toaster.mdx:
--------------------------------------------------------------------------------
1 | # Toaster
2 |
3 | This component renders all the toasts, you can place it anywhere in your app.
4 |
5 | ## Customization
6 |
7 | You can see examples of most of the scenarios described below on the [homepage](/).
8 |
9 | ### Expand
10 |
11 | When you hover on one of the toasts, they will expand. You can make that the default behavior by setting the `expand` prop to `true`, and customize it even further with the `visibleToasts` prop.
12 |
13 | ```jsx
14 | // 9 toasts will be visible instead of the default, which is 3.
15 |
16 | ```
17 |
18 | ### Position
19 |
20 | Changes the place where all toasts will be rendered.
21 |
22 | ```jsx
23 | // Available positions:
24 | // top-left, top-center, top-right, bottom-left, bottom-center, bottom-right
25 |
26 | ```
27 |
28 | ### Styling all toasts
29 |
30 | You can customzie all toasts at once with `toastOptions` prop. These options witll act as the default for all toasts.
31 |
32 | ```jsx
33 |
39 | ```
40 |
41 | ### dir
42 |
43 | Changes the directionality of the toast's text.
44 |
45 | ```jsx
46 | // rtl, ltr, auto
47 |
48 | ```
49 |
50 | ## API Reference
51 |
52 | | Property | Description | Default |
53 | | :------------ | :------------------------------------------------------------------------------------------------: | -------------: |
54 | | theme | Toast's theme, either `light`, `dark`, or `system` | `light` |
55 | | richColors | Makes error and success state more colorful | `false` |
56 | | expand | Toasts will be expanded by default | `false` |
57 | | visibleToasts | Amount of visible toasts | `3` |
58 | | position | Place where the toasts will be rendered | `bottom-right` |
59 | | closeButton | Adds a close button to all toasts, shows on hover | `false` |
60 | | offset | Offset from the edges of the screen. | `32px` |
61 | | dir | Directionality of toast's text | `ltr` |
62 | | hotkey | Keyboard shortcut that will move focus to the toaster area. | `⌥/alt + T` |
63 | | invert | Dark toasts in light mode and vice versa. | `false` |
64 | | toastOptions | These will act as default options for all toasts. See [toast()](/toast) for all available options. | `4000` |
65 | | gap | Gap between toasts when expanded | `14` |
66 |
--------------------------------------------------------------------------------
/website/src/components/Types/Types.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { toast } from 'sonner';
3 | import { CodeBlock } from '../CodeBlock';
4 |
5 | const promiseCode = '`${data.name} toast has been added`';
6 |
7 | export const Types = () => {
8 | const [activeType, setActiveType] = React.useState(allTypes[0]);
9 |
10 | return (
11 |
12 |
Types
13 |
You can customize the type of toast you want to render, and pass an options object as the second argument.
, { duration: 5000 });
103 | ```
104 |
105 | ### Headless
106 |
107 | Use it to render an unstyled toast with custom jsx while maintaining the functionality. This function receives the `Toast` as an argument, giving you access to all properties.
108 |
109 | ```jsx
110 | toast.custom((t) => (
111 |