39 | );
40 | };
41 | ```
42 |
--------------------------------------------------------------------------------
/site/pages/docs/styling.mdx:
--------------------------------------------------------------------------------
1 | import Layout from '../../components/docs-layout';
2 | import toast from 'react-hot-toast';
3 |
4 | export const meta = {
5 | title: 'Styling',
6 | };
7 |
8 | export default ({ children }) => {children};
9 |
10 | # Styling
11 |
12 | You can style your notifications globally with the `toastOptions` inside the Toaster component, or for each notification manually.
13 |
14 | ### Set default for all toasts
15 |
16 | ```jsx
17 |
27 | ```
28 |
29 | ### Set default for specific types
30 |
31 | ```jsx
32 |
46 | ```
47 |
48 | ### Style per toast
49 |
50 | ```jsx
51 | toast('I have a border.', {
52 | style: {
53 | border: '1px solid black',
54 | },
55 | });
56 | ```
57 |
58 | ## Change the offset
59 |
60 | If you want to change the offset of your notifications, you can adapt the absolute position in `containerStyle`.
61 |
62 | ```jsx
63 |
71 | ```
72 |
73 | ## Change position of the toaster
74 |
75 | By default, the toaster is position fixed in the window. If you want to place it somewhere else, you can ovewrite the position with `containerStyle`.
76 |
77 | ```jsx
78 |
83 | ```
84 |
85 | ## Change offset between toasts
86 |
87 | If you want to change the offset between notifications change the gutter.
88 |
89 | ```jsx
90 |
91 | ```
92 |
93 | ## Change icon color
94 |
95 | All icon colors can be changed by supplying a `iconTheme` with a `primary` & `secondary` color.
96 |
97 | ```jsx
98 |
108 | ```
109 |
110 | ## Change enter and exit animations
111 |
112 | In this example, we provide a render function with the default ``. We overwrite the animation style based on the current state.
113 |
114 | ```jsx
115 | import { Toaster, ToastBar } from 'react-hot-toast';
116 |
117 |
118 | {(t) => (
119 |
126 | )}
127 | ;
128 | ```
129 |
--------------------------------------------------------------------------------
/site/pages/docs/toast-bar.mdx:
--------------------------------------------------------------------------------
1 | import Layout from '../../components/docs-layout';
2 | import toast from 'react-hot-toast';
3 |
4 | export const meta = {
5 | title: ' API',
6 | };
7 |
8 | export default ({ children }) => {children};
9 |
10 | # `` API
11 |
12 | This is the **default toast component** rendered by the [Toaster](/docs/toaster). You can use this component in a [Toaster](/docs/toaster) with a custom render function to overwrite its defaults.
13 |
14 | ## Available options
15 |
16 | ```jsx
17 |
22 | ```
23 |
24 | ## Add custom content
25 |
26 | You can add a **render function to the ToastBar to modify its content**. An object containing The `icon` as well as the `message` are passed into the function.
27 |
28 | ### Add a dismiss button
29 |
30 | In this example we add a basic dismiss button to all toasts, except if the loading one.
31 |
32 | ```jsx
33 | import { toast, Toaster, ToastBar } from 'react-hot-toast';
34 |
35 |
36 | {(t) => (
37 |
38 | {({ icon, message }) => (
39 | <>
40 | {icon}
41 | {message}
42 | {t.type !== 'loading' && (
43 |
44 | )}
45 |
46 | )}
47 |
48 | )}
49 | ;
50 | ```
51 |
--------------------------------------------------------------------------------
/site/pages/docs/toast.mdx:
--------------------------------------------------------------------------------
1 | import Layout from '../../components/docs-layout';
2 | import toast from 'react-hot-toast';
3 |
4 | export const meta = {
5 | title: 'toast() API',
6 | };
7 |
8 | # `toast()` API
9 |
10 | Call it to create a toast from anywhere, even outside React. Make sure you add the [``](/docs/toaster) component to your app first.
11 |
12 | ## Available toast options
13 |
14 | You can provide `ToastOptions` as the second argument. They will overwrite all options received from [``](/docs/toaster).
15 |
16 | ```js
17 | toast('Hello World', {
18 | duration: 4000,
19 | position: 'top-center',
20 |
21 | // Styling
22 | style: {},
23 | className: '',
24 |
25 | // Custom Icon
26 | icon: '👏',
27 |
28 | // Change colors of success/error/loading icon
29 | iconTheme: {
30 | primary: '#000',
31 | secondary: '#fff',
32 | },
33 |
34 | // Aria
35 | ariaProps: {
36 | role: 'status',
37 | 'aria-live': 'polite',
38 | },
39 | });
40 | ```
41 |
42 | ## Creating a toast
43 |
44 | ### Blank
45 |
46 | ```js
47 | toast('Hello World');
48 | ```
49 |
50 | The most basic variant. It does not have an icon by default, but you can provide one via the options. If you don't want any default styles, use `toast.custom()` instead.
51 |
52 | ### Success
53 |
54 | ```js
55 | toast.success('Successfully created!');
56 | ```
57 |
58 | Creates a notification with an animated checkmark. It can be themed with the `iconTheme` option.
59 |
60 | ### Error
61 |
62 | ```js
63 | toast.error('This is an error!');
64 | ```
65 |
66 | Creates a notification with an animated error icon. It can be themed with the `iconTheme` option.
67 |
68 | ### Custom (JSX)
69 |
70 | ```js
71 | toast.custom(
Hello World
);
72 | ```
73 |
74 | Creates a custom notification with JSX without default styles.
75 |
76 | ### Loading
77 |
78 | ```js
79 | toast.loading('Waiting...');
80 | ```
81 |
82 | This will create a loading notification. Most likely, you want to update it afterwards. For a friendly alternative, check out `toast.promise()`, which takes care of that automatically.
83 |
84 | ### Promise
85 |
86 | This shorthand is useful for mapping a promise to a toast. It will update automatically when the promise resolves or fails.
87 |
88 | #### Simple Usage
89 |
90 | ```js
91 | const myPromise = fetchData();
92 |
93 | toast.promise(myPromise, {
94 | loading: 'Loading',
95 | success: 'Got the data',
96 | error: 'Error when fetching',
97 | });
98 | ```
99 |
100 | It's recommend to add min-width to your `toast.promise()` calls to **prevent jumps** from different message lengths.
101 |
102 | #### Advanced
103 |
104 | You can provide a function to the success/error messages to incorporate the result/error of the promise. The third argument are `toastOptions` similiar to [``](/docs/toaster)
105 |
106 | ```js
107 | toast.promise(
108 | myPromise,
109 | {
110 | loading: 'Loading',
111 | success: (data) => `Successfully saved ${data.name}`,
112 | error: (err) => `This just happened: ${err.toString()}`,
113 | },
114 | {
115 | style: {
116 | minWidth: '250px',
117 | },
118 | success: {
119 | duration: 5000,
120 | icon: '🔥',
121 | },
122 | }
123 | );
124 | ```
125 |
126 | ## Default durations
127 |
128 | Every type has its own duration. You can overwrite them `duration` with the toast options. This can be done per toast options or globally by the [``](/docs/toaster).
129 |
130 | | type | duration |
131 | | --------- | -------- |
132 | | `blank` | 4000 |
133 | | `error` | 4000 |
134 | | `success` | 2000 |
135 | | `custom` | 4000 |
136 | | `loading` | Infinity |
137 |
138 | ### Dismiss toast programmatically
139 |
140 | You can manually dismiss a notification with `toast.dismiss`. Be aware that it triggers the exit animation and does not remove the Toast instantly. Toasts will auto-remove after 1 second by default.
141 |
142 | #### Dismiss a single toast
143 |
144 | ```js
145 | const toastId = toast.loading('Loading...');
146 |
147 | // ...
148 |
149 | toast.dismiss(toastId);
150 | ```
151 |
152 | You can dismiss all toasts at once, by leaving out the `toastId`.
153 |
154 | #### Dismiss all toasts at once
155 |
156 | ```js
157 | toast.dismiss();
158 | ```
159 |
160 | To remove toasts instantly without any animations, use `toast.remove`.
161 |
162 | #### Remove toasts instantly
163 |
164 | ```js
165 | toast.remove(toastId);
166 |
167 | // or
168 |
169 | toast.remove();
170 | ```
171 |
172 | ### Update an existing toast
173 |
174 | Each toast call returns a unique id. Use in the toast options to update the existing toast.
175 |
176 | ```js
177 | const toastId = toast.loading('Loading...');
178 |
179 | // ...
180 |
181 | toast.success('This worked', {
182 | id: toastId,
183 | });
184 | ```
185 |
186 | ### Prevent duplicate toasts
187 |
188 | To prevent duplicates of the same kind, you can provide a unique permanent id.
189 |
190 | ```js
191 | toast.success('Copied to clipboard!', {
192 | id: 'clipboard',
193 | });
194 | ```
195 |
196 | ### Render JSX custom content
197 |
198 | You can provide a React component instead of text. If you don't want any default styles use `toast.custom()` instead.
199 |
200 | ```jsx
201 | toast(
202 |
203 | Custom and bold
204 | ,
205 | {
206 | icon: ,
207 | }
208 | );
209 | ```
210 |
211 | You can also supply a function that receives the `Toast` as an argument, giving you access to all properties. This allows you to access the toast id, which can be used to add a dismiss button.
212 |
213 | ```jsx
214 | toast(
215 | (t) => (
216 |
217 | Custom and bold
218 |
219 |
220 | ),
221 | {
222 | icon: ,
223 | }
224 | );
225 | ```
226 |
227 | export default ({ children }) => {children};
228 |
--------------------------------------------------------------------------------
/site/pages/docs/toaster.mdx:
--------------------------------------------------------------------------------
1 | import Layout from '../../components/docs-layout';
2 | import toast from 'react-hot-toast';
3 |
4 | export const meta = {
5 | title: ' API',
6 | };
7 |
8 | export default ({ children }) => {children};
9 |
10 | # `` API
11 |
12 | This component will render all toasts. Alternatively you can create own renderer with the headless [`useToaster()`](/docs/use-toaster) hook.
13 |
14 | ## Available options
15 |
16 | ```jsx
17 |
42 | ```
43 |
44 | ### `position` Prop
45 |
46 | You can change the position of all toasts by modifying supplying `positon` prop.
47 |
48 | | Positions | | |
49 | | ----------- | ------------- | ------------ |
50 | | top-left | top-center | top-right |
51 | | bottom-left | bottom-center | bottom-right |
52 |
53 | ### `reverseOrder` Prop
54 |
55 | Toasts spawn at top by default. Set to `true` if you want new toasts at the end.
56 |
57 | ### `containerClassName` Prop
58 |
59 | Add a custom CSS class name to toaster div. Defaults to `undefined`.
60 |
61 | ### `containerStyle` Prop
62 |
63 | Customize the style of toaster div. This can be used to change the offset of all toasts
64 |
65 | ### `gutter` Prop
66 |
67 | Changes the gap between each toast. Defaults to `8`.
68 |
69 | ### `toastOptions` Prop
70 |
71 | These will act as default options for all toasts. See [`toast()`](/docs/toast) for all available options.
72 |
73 | #### Type specific options
74 |
75 | You can change the defaults for a specific type by adding, `success: {}`, `error: {}`, `loading: {}` or `custom: {}`.
76 |
77 | ## Using a custom render function
78 |
79 | You can provide your **own render function** to the Toaster by passing it as children. It will be called for each [Toast](https://github.com/timolins/react-hot-toast/blob/main/src/core/types.ts#L34) allowing you to render any component based on the toast state.
80 |
81 | ### Minimal example
82 |
83 | ```jsx
84 | import { Toaster, resolveValue } from 'react-hot-toast';
85 |
86 | // In your app
87 |
88 | {(t) => (
89 |
92 | {resolveValue(t.message, t)}
93 |
94 | )}
95 | ;
96 | ```
97 |
98 | `resolveValue()` is needed to resolve all message types: Text, JSX or a function that resolves to JSX.
99 |
100 | ### Adapting the default [``](/docs/toast-bar)
101 |
102 | You can use this API to modify the default ToastBar as well. In this example we overwrite the animation style based on the current state.
103 |
104 | ```jsx
105 | import { Toaster, ToastBar } from 'react-hot-toast';
106 |
107 |
108 | {(t) => (
109 |
116 | )}
117 | ;
118 | ```
119 |
120 | Check out the [``](/docs/toast-bar) docs for more options.
121 |
--------------------------------------------------------------------------------
/site/pages/docs/use-toaster-store.mdx:
--------------------------------------------------------------------------------
1 | import Layout from '../../components/docs-layout';
2 | import toast from 'react-hot-toast';
3 |
4 | export const meta = {
5 | title: 'useToasterStore() API',
6 | };
7 |
8 | export default ({ children }) => {children};
9 |
10 | # `useToasterStore()` API
11 |
12 | This hook gives you access to the internal toaster state. This is the right choice if you need access to the data without wanting to roll your own toaster.
13 |
14 | In comparison to [`useToaster()`](/docs/use-toaster) it does not handle pausing or provide handlers for creating your own notification system.
15 |
16 | ```jsx
17 | import { useToasterStore } from 'react-hot-toast';
18 |
19 | const { toasts, pausedAt } = useToasterStore();
20 | ```
21 |
--------------------------------------------------------------------------------
/site/pages/docs/use-toaster.mdx:
--------------------------------------------------------------------------------
1 | import Layout from '../../components/docs-layout';
2 | import toast from 'react-hot-toast';
3 |
4 | export const meta = {
5 | title: 'useToaster() API',
6 | };
7 |
8 | export default ({ children }) => {children};
9 |
10 | # `useToaster()` API
11 |
12 | The `useToaster()` hook provides you a **headless system that will manage the notification state** for you. This makes building your own notification system much easier.
13 |
14 | It solves the following problems for you:
15 |
16 | - Built-in dispatch system with [`toast()`](/docs/toast)
17 | - Handlers to pause toasts on hover
18 | - Automatically remove expired toasts
19 | - Support for unmount animations. Removal is delayed by 1s, but sets `visible` on the toast to `false`.
20 |
21 | ### Importing from headless
22 |
23 | You can import only the core of the library with `react-hot-toast/headless`. It won't include any styles, dependencies or custom components.
24 |
25 | ```jsx
26 | import { useToaster } from 'react-hot-toast/headless';
27 | ```
28 |
29 | Be aware: [react-hot-toast 2.0](/docs/version-2) adds support for **custom render functions**, an easier method to render custom notification components.
30 |
31 | It's recommended to only have one `` or `useToaster()` in your app at a time. If you need the current state without the handlers, you should use [`useToasterStore()`](/docs/use-toaster-store) instead.
32 |
33 | ## Usage with React Native
34 |
35 | Headless mode is perfectly suited to add notifications to your React Native app. You can check out [this example]().
36 |
37 | ## Examples
38 |
39 | ### Basic Example
40 |
41 | ```jsx
42 | import toast, { useToaster } from 'react-hot-toast/headless';
43 |
44 | const Notifications = () => {
45 | const { toasts, handlers } = useToaster();
46 | const { startPause, endPause } = handlers;
47 |
48 | return (
49 |
58 | );
59 | };
60 |
61 | // Create toasts anywhere
62 | toast('Hello World');
63 | ```
64 |
65 | ### Animated Example
66 |
67 | Instead of mapping over `visibleToasts` we'll use `toasts`, which includes all hidden toasts. We animate them based on `toast.visible`. Toasts will be removed from 1 second after being dismissed, which give us enough time to animate.
68 |
69 | You can play with the demo on [CodeSandbox](https://codesandbox.io/s/react-hot-toast-usetoaster-headless-example-zw7op?file=/src/App.js).
70 |
71 | ```jsx
72 | import { useToaster } from 'react-hot-toast/headless';
73 |
74 | const Notifications = () => {
75 | const { toasts, handlers } = useToaster();
76 | const { startPause, endPause, calculateOffset, updateHeight } = handlers;
77 |
78 | return (
79 |
119 | );
120 | };
121 | ```
122 |
--------------------------------------------------------------------------------
/site/pages/docs/version-2.mdx:
--------------------------------------------------------------------------------
1 | import Layout from '../../components/docs-layout';
2 | import toast from 'react-hot-toast';
3 |
4 | export const meta = {
5 | title: 'react-hot-toast 2.0 changes',
6 | };
7 |
8 | export default ({ children }) => {children};
9 |
10 | # What's new in react-hot-toast 2.0
11 |
12 | This release is all about **flexibility**. It allows you to create the notification system of your dreams, even simpler. Before we dig deeper into the new APIs, check out what's included in this release:
13 |
14 |
32 |
33 | As well as a many [other improvements and fixes](#changelog).
34 |
35 | ## Introducing `toast.custom()`
36 |
37 | This new function allows you to **render any React component** on the fly. Pass in JSX, and it will add it to the notification stack. There are no default styles applied, giving you complete control.
38 |
39 | This API makes it super easy to add [Tailwind UI Notifications](https://tailwindui.com/components/application-ui/overlays/notifications) to your React app.
40 |
41 | ```jsx
42 | // Minimal Example
43 | toast.custom(
70 |
71 | In the example above, we pass in a **function that returns JSX**. This allows us to access the current toast state and toggle between the enter and exit animation.
72 |
73 | Instead of CSS keyframe animations, you can use TailwindCSS classes by wrapping it in the [Transition](https://headlessui.dev/react/transition) component from [@headlessui/react](https://headlessui.dev/).
74 |
75 | ## Better accessibility
76 |
77 | The prefers reduced motion is now respected by default. If react-hot-toast detects this setting, it will use fade transitions instead of sliding.
78 |
79 | ## Smoother exit animation
80 |
81 | The exit animation is now less hectic when you have multiple toasts stacked.
82 |
83 | ## Per toast positioning
84 |
85 | From now on, it's possible to have toasts at multiple positions at once. Just add the `position` you want as option when dispatching a toast.
86 |
87 | ```jsx
88 | toast.success('Always at the bottom', {
89 | position: 'bottom-center',
90 | });
91 | ```
92 |
93 |
94 |
101 |
102 |
103 | ## Relative positioning
104 |
105 | You can now overwrite the default position of the toaster and place it anywhere you want.
106 |
107 | ```jsx
108 |
109 | ```
110 |
111 | ## Simpler offset styling
112 |
113 | There is now a `gutter` option to control the gap between toasts.
114 |
115 | ```jsx
116 |
117 | ```
118 |
119 | The offset is now controlled by the Toaster and can be changed by overwriting the `top`, `right`, `bottom` and `left` styles.
120 |
121 | ```jsx
122 |
123 | ```
124 |
125 | ## Custom Renderer API
126 |
127 | You can now use the [``](/docs/toaster#using-a-custom-render-function) to render your own components. Pass in a function that receives a [Toast](https://github.com/timolins/react-hot-toast/blob/main/src/core/types.ts#L34) as the first argument, allowing you to render whatever you please.
128 |
129 | This is a great alternative if you are using [`useToaster()`](/docs/use-toaster) to render create custom notfications.
130 |
131 | This API allows us to dynamically react to to current state our toasts. This can be used to **change the default animations**, add **a custom dismiss button** or render a custom notification, like [TailwindUI Notifications](https://tailwindui.com/components/application-ui/overlays/notifications).
132 |
133 | ```jsx
134 | import { toast, Toaster, ToastBar } from 'react-hot-toast';
135 |
136 | const CustomToaster = () => (
137 |
138 | {(t) => (
139 |
140 | {({ icon, message }) => (
141 | <>
142 | {icon}
143 | {message}
144 | {t.type !== 'loading' && (
145 |
146 | )}
147 |
148 | )}
149 |
150 | )}
151 |
152 | );
153 | ```
154 |
155 | This example adapts the [ToastBar](/docs/toast-bar) with its new render function API. You can read more about the APIs in the [Toaster](/docs/toaster) & [ToastBar](/docs/toast-bar) docs.
156 |
157 | ## Available now
158 |
159 | Get react-hot-toast 2.0 while it's hot. Upgrading from 1.0.0 should be seamless for most users.
160 |
161 | ```sh
162 | yarn add react-hot-toast
163 | ```
164 |
165 | ## The future and beyond
166 |
167 | React Hot Toast got a lot more flexible with this version, laying the **foundation for future releases**. Thanks to everyone who helped out; much appreciated!
168 |
169 | In the next releases, I plan to add the [most requested feature](https://github.com/timolins/react-hot-toast/issues/7): a dismiss button. As well as support for [custom toast types](https://github.com/timolins/react-hot-toast/issues/23).
170 |
171 | ---
172 |
173 | ## Changelog
174 |
175 | ### New
176 |
177 | - Easier Customization
178 | - Create your own toast renderer (without useToaster)
179 | - Support for custom render function in Toaster
180 | - Support for custom render function in ToastBar
181 | - `toast.custom()` - Render custom one-off toasts. No default styling will be applied.
182 | - Per toast positioning
183 | - New exit animation
184 | - Change the gutter between toasts with ``
185 | - Support for relative positioning
186 | - Respect reduce motion OS setting
187 | - Create persistent toasts with `duration: Infinity`
188 |
189 | ### Breaking Changes
190 |
191 | - Use the `top`, `right`, `bottom`, `left` to in `containerStyle` to change the offset, instead of margin
192 | - Loading toasts no longer disappear after 30 seconds
193 | - `role` & `ariaLive` got moved into `ariaProps`
194 | - `useToaster()` no longer exposes `visibleToasts`
195 | - No longer expose `dispatch`
196 |
--------------------------------------------------------------------------------
/site/pages/index.tsx:
--------------------------------------------------------------------------------
1 | import { NextSeo } from 'next-seo';
2 | import toast, {
3 | Toaster,
4 | useToasterStore,
5 | ToastPosition,
6 | } from 'react-hot-toast';
7 | import React, { useState } from 'react';
8 | import clsx from 'clsx';
9 | import Link from 'next/link';
10 |
11 | import Logo from '../assets/logo.svg';
12 | import Butter1 from '../assets/butter-1.svg';
13 | import Butter2 from '../assets/butter-2.svg';
14 | import GitHub from '../assets/github.svg';
15 | import Checkmark from '../assets/checkmark.svg';
16 | import { ToastExample } from '../components/sections/toast-example';
17 | import { Footer } from '../components/sections/footer';
18 | import { ToasterExample } from '../components/sections/toaster-example';
19 | import { SplitbeeCounter } from '../components/sections/splitbee-counter';
20 |
21 | import packageInfo from '../../package.json';
22 | const version = packageInfo.version;
23 |
24 | const Feature: React.FC<{ children?: React.ReactNode }> = ({ children }) => (
25 |
7 |
8 | 
202 |