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 |
128 | )}
129 | ;
130 | ```
131 |
--------------------------------------------------------------------------------
/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 | // Additional Configuration
41 | removeDelay: 1000,
42 | });
43 | ```
44 |
45 | ## Creating a toast
46 |
47 | ### Blank
48 |
49 | ```js
50 | toast('Hello World');
51 | ```
52 |
53 | 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.
54 |
55 | ### Success
56 |
57 | ```js
58 | toast.success('Successfully created!');
59 | ```
60 |
61 | Creates a notification with an animated checkmark. It can be themed with the `iconTheme` option.
62 |
63 | ### Error
64 |
65 | ```js
66 | toast.error('This is an error!');
67 | ```
68 |
69 | Creates a notification with an animated error icon. It can be themed with the `iconTheme` option.
70 |
71 | ### Custom (JSX)
72 |
73 | ```js
74 | toast.custom(
Hello World
);
75 | ```
76 |
77 | Creates a custom notification with JSX without default styles.
78 |
79 | ### Loading
80 |
81 | ```js
82 | toast.loading('Waiting...');
83 | ```
84 |
85 | 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.
86 |
87 | ### Promise
88 |
89 | This shorthand is useful for mapping a promise to a toast. It will update automatically when the promise resolves or fails.
90 |
91 | #### Simple Usage
92 |
93 | ```js
94 | const myPromise = fetchData();
95 |
96 | toast.promise(myPromise, {
97 | loading: 'Loading',
98 | success: 'Got the data',
99 | error: 'Error when fetching',
100 | });
101 | ```
102 |
103 | It's recommend to add min-width to your `toast.promise()` calls to **prevent jumps** from different message lengths.
104 |
105 | #### Advanced
106 |
107 | 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)
108 |
109 | ```js
110 | toast.promise(
111 | myPromise,
112 | {
113 | loading: 'Loading',
114 | success: (data) => `Successfully saved ${data.name}`,
115 | error: (err) => `This just happened: ${err.toString()}`,
116 | },
117 | {
118 | style: {
119 | minWidth: '250px',
120 | },
121 | success: {
122 | duration: 5000,
123 | icon: '🔥',
124 | },
125 | }
126 | );
127 | ```
128 |
129 | #### Using an Async Function
130 |
131 | You can also provide a function that returns a promise, which will be called automatically.
132 |
133 | ```js
134 | toast.promise(
135 | async () => {
136 | const { id } = await fetchData1();
137 | await fetchData2(id);
138 | },
139 | {
140 | loading: 'Loading',
141 | success: 'Got the data',
142 | error: 'Error when fetching',
143 | }
144 | );
145 | ```
146 |
147 | ## Default durations
148 |
149 | 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).
150 |
151 | | type | duration |
152 | | --------- | -------- |
153 | | `blank` | 4000 |
154 | | `error` | 4000 |
155 | | `success` | 2000 |
156 | | `custom` | 4000 |
157 | | `loading` | Infinity |
158 |
159 | ### Dismiss toast programmatically
160 |
161 | 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.
162 |
163 | #### Dismiss a single toast
164 |
165 | ```js
166 | const toastId = toast.loading('Loading...');
167 |
168 | // ...
169 |
170 | toast.dismiss(toastId);
171 | ```
172 |
173 | You can dismiss all toasts at once, by leaving out the `toastId`.
174 |
175 | #### Dismiss all toasts at once
176 |
177 | ```js
178 | toast.dismiss();
179 | ```
180 |
181 | To remove toasts instantly without any animations, use `toast.remove`.
182 |
183 | #### Configure remove delay
184 |
185 | ```js
186 | toast.success('Successfully created!', { removeDelay: 500 });
187 | ```
188 |
189 | By default, the remove operation is delayed by 1000ms. This is how long a toast should be kept in the DOM after being dismissed. It is used to play the exit animation. This duration (number in milliseconds) can be configured when calling the toast.
190 |
191 | Or, for all toasts, using the Toaster like so:
192 |
193 | ```js
194 |
199 | ```
200 |
201 | #### Remove toasts instantly
202 |
203 | ```js
204 | toast.remove(toastId);
205 |
206 | // or
207 |
208 | toast.remove();
209 | ```
210 |
211 | ### Update an existing toast
212 |
213 | Each toast call returns a unique id. Use in the toast options to update the existing toast.
214 |
215 | ```js
216 | const toastId = toast.loading('Loading...');
217 |
218 | // ...
219 |
220 | toast.success('This worked', {
221 | id: toastId,
222 | });
223 | ```
224 |
225 | ### Prevent duplicate toasts
226 |
227 | To prevent duplicates of the same kind, you can provide a unique permanent id.
228 |
229 | ```js
230 | toast.success('Copied to clipboard!', {
231 | id: 'clipboard',
232 | });
233 | ```
234 |
235 | ### Render JSX custom content
236 |
237 | You can provide a React component instead of text. If you don't want any default styles use `toast.custom()` instead.
238 |
239 | ```jsx
240 | toast(
241 |
242 | Custom and bold
243 | ,
244 | {
245 | icon: ,
246 | }
247 | );
248 | ```
249 |
250 | 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.
251 |
252 | ```jsx
253 | toast(
254 | (t) => (
255 |
256 | Custom and bold
257 |
258 |
259 | ),
260 | {
261 | icon: ,
262 | }
263 | );
264 | ```
265 |
266 | export default ({ children }) => {children};
267 |
--------------------------------------------------------------------------------
/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 |
43 | ```
44 |
45 | ### `position` Prop
46 |
47 | You can change the position of all toasts by modifying supplying `positon` prop.
48 |
49 | | Positions | | |
50 | | ----------- | ------------- | ------------ |
51 | | top-left | top-center | top-right |
52 | | bottom-left | bottom-center | bottom-right |
53 |
54 | ### `reverseOrder` Prop
55 |
56 | Toasts spawn at top by default. Set to `true` if you want new toasts at the end.
57 |
58 | ### `containerClassName` Prop
59 |
60 | Add a custom CSS class name to toaster div. Defaults to `undefined`.
61 |
62 | ### `containerStyle` Prop
63 |
64 | Customize the style of toaster div. This can be used to change the offset of all toasts
65 |
66 | ### `gutter` Prop
67 |
68 | Changes the gap between each toast. Defaults to `8`.
69 |
70 | ### `toastOptions` Prop
71 |
72 | These will act as default options for all toasts. See [`toast()`](/docs/toast) for all available options.
73 |
74 | #### Type specific options
75 |
76 | You can change the defaults for a specific type by adding, `success: {}`, `error: {}`, `loading: {}` or `custom: {}`.
77 |
78 | ## Using a custom render function
79 |
80 | 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.
81 |
82 | ### Minimal example
83 |
84 | ```jsx
85 | import { Toaster, resolveValue } from 'react-hot-toast';
86 |
87 | // In your app
88 |
89 | {(t) => (
90 |
93 | {resolveValue(t.message, t)}
94 |
95 | )}
96 | ;
97 | ```
98 |
99 | `resolveValue()` is needed to resolve all message types: Text, JSX or a function that resolves to JSX.
100 |
101 | ### Adapting the default [``](/docs/toast-bar)
102 |
103 | 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.
104 |
105 | ```jsx
106 | import { Toaster, ToastBar } from 'react-hot-toast';
107 |
108 |
109 | {(t) => (
110 |
119 | )}
120 | ;
121 | ```
122 |
123 | Check out the [``](/docs/toast-bar) docs for more options.
124 |
--------------------------------------------------------------------------------
/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 the current state of your 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 | pnpm 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 |