[
{
"path": ".github/workflows/main.yml",
"content": "name: CI\non: [push]\njobs:\n build:\n name: Build & test\n runs-on: ubuntu-latest\n steps:\n - uses: actions/checkout@v4\n - uses: pnpm/action-setup@v4\n - name: Use Node.js ${{ matrix.node-version }}\n uses: actions/setup-node@v4\n with:\n node-version: ${{ matrix.node-version }}\n cache: 'pnpm'\n - name: Install dependencies\n run: pnpm install\n - name: Build package\n run: pnpm build\n - name: Test\n run: pnpm run test --ci --coverage\n"
},
{
"path": ".github/workflows/size.yml",
"content": "name: size\non: [pull_request]\njobs:\n size:\n runs-on: ubuntu-latest\n env:\n CI_JOB_NUMBER: 1\n steps:\n - uses: actions/checkout@v4\n - uses: pnpm/action-setup@v4\n - uses: actions/setup-node@v4\n with:\n node-version: 20.x\n cache: 'pnpm'\n - run: pnpm install\n - uses: andresz1/size-limit-action@v1\n with:\n github_token: ${{ secrets.GITHUB_TOKEN }}\n"
},
{
"path": ".gitignore",
"content": "*.log\n.DS_Store\nnode_modules\n.cache\ncoverage\ndist\n/headless\n.vscode\n.vercel\n"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2020 Timo Lins\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE."
},
{
"path": "README.md",
"content": "\n\n
\n \n \n \n\n
\n \n
Smoking hot Notifications for React.
\n
Lightweight, customizable and beautiful by default.
\n\n \n\n## Features\n\n- ๐ฅ **Hot by default**\n- ๐ฉ **Easily Customizable**\n- โณ **Promise API** - _Automatic loader from a promise_\n- ๐ **Lightweight** - _less than 5kb including styles_\n- โ **Accessible**\n- ๐คฏ **Headless Hooks** - _Create your own with [`useToaster()`](https://react-hot-toast.com/docs/use-toaster)_\n\n## Installation\n\n#### With pnpm\n\n```sh\npnpm add react-hot-toast\n```\n\n#### With NPM\n\n```sh\nnpm install react-hot-toast\n```\n\n## Getting Started\n\nAdd the Toaster to your app first. It will take care of rendering all notifications emitted. Now you can trigger `toast()` from anywhere!\n\n```jsx\nimport toast, { Toaster } from 'react-hot-toast';\n\nconst notify = () => toast('Here is your toast.');\n\nconst App = () => {\n return (\n
\n \n \n
\n );\n};\n```\n\n## Documentation\n\nFind the full API reference on [official documentation](https://react-hot-toast.com/docs).\n"
},
{
"path": "jest.config.js",
"content": "/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */\nmodule.exports = {\n preset: 'ts-jest',\n testEnvironment: 'jsdom',\n setupFilesAfterEnv: ['/test/setup.ts'],\n};\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"react-hot-toast\",\n \"description\": \"Smoking hot React Notifications. Lightweight, customizable and beautiful by default.\",\n \"version\": \"2.6.0\",\n \"author\": \"Timo Lins\",\n \"license\": \"MIT\",\n \"repository\": \"timolins/react-hot-toast\",\n \"keywords\": [\n \"react\",\n \"notifications\",\n \"toast\",\n \"snackbar\"\n ],\n \"main\": \"dist/index.js\",\n \"types\": \"dist/index.d.ts\",\n \"exports\": {\n \"./package.json\": \"./package.json\",\n \".\": {\n \"types\": \"./dist/index.d.ts\",\n \"import\": \"./dist/index.mjs\",\n \"require\": \"./dist/index.js\"\n },\n \"./headless\": {\n \"types\": \"./headless/index.d.ts\",\n \"import\": \"./headless/index.mjs\",\n \"require\": \"./headless/index.js\"\n }\n },\n \"files\": [\n \"headless\",\n \"dist\",\n \"src\"\n ],\n \"engines\": {\n \"node\": \">=10\"\n },\n \"scripts\": {\n \"start\": \"tsup --watch\",\n \"build\": \"tsup\",\n \"test\": \"jest --runInBand\",\n \"setup\": \"pnpm i && cd site && pnpm i && cd .. && pnpm run link\",\n \"link\": \"pnpm link ./site/node_modules/react && pnpm link ./site/node_modules/react-dom\",\n \"size\": \"size-limit\"\n },\n \"husky\": {\n \"hooks\": {\n \"pre-commit\": \"prettier src --ignore-unknown --write\"\n }\n },\n \"prettier\": {\n \"printWidth\": 80,\n \"semi\": true,\n \"singleQuote\": true,\n \"arrowParens\": \"always\",\n \"trailingComma\": \"es5\"\n },\n \"size-limit\": [\n {\n \"path\": \"dist/index.js\",\n \"limit\": \"5.5 KB\"\n },\n {\n \"path\": \"dist/index.mjs\",\n \"limit\": \"5.5 KB\"\n },\n {\n \"path\": \"headless/index.js\",\n \"limit\": \"2.5 KB\"\n },\n {\n \"path\": \"headless/index.mjs\",\n \"limit\": \"2.5 KB\"\n }\n ],\n \"devDependencies\": {\n \"@jest/types\": \"^29.6.3\",\n \"@size-limit/preset-small-lib\": \"^7.0.8\",\n \"@testing-library/jest-dom\": \"^6.6.3\",\n \"@testing-library/react\": \"^16.1.0\",\n \"@types/jest\": \"^29.5.14\",\n \"@types/react\": \"^18.3.18\",\n \"@types/react-dom\": \"^18.3.5\",\n \"esbuild-minify-templates\": \"^0.13.1\",\n \"jest\": \"^29.7.0\",\n \"jest-environment-jsdom\": \"^29.7.0\",\n \"prettier\": \"^2.8.8\",\n \"react\": \"^18.3.1\",\n \"react-dom\": \"^18.3.1\",\n \"size-limit\": \"^7.0.8\",\n \"ts-jest\": \"^29.2.5\",\n \"tslib\": \"^2.8.1\",\n \"tsup\": \"^6.7.0\",\n \"typescript\": \"^5.7.2\"\n },\n \"dependencies\": {\n \"csstype\": \"^3.1.3\",\n \"goober\": \"^2.1.16\"\n },\n \"peerDependencies\": {\n \"react\": \">=16\",\n \"react-dom\": \">=16\"\n },\n \"packageManager\": \"pnpm@9.15.4+sha512.b2dc20e2fc72b3e18848459b37359a32064663e5627a51e4c74b2c29dd8e8e0491483c3abb40789cfd578bf362fb6ba8261b05f0387d76792ed6e23ea3b1b6a0\"\n}\n"
},
{
"path": "site/.gitignore",
"content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
},
{
"path": "site/README.md",
"content": "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).\n\n## Getting Started\n\nFirst, run the development server:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) with your browser to see the result.\n\nYou can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.\n\n## Learn More\n\nTo learn more about Next.js, take a look at the following resources:\n\n- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.\n- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.\n\nYou can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!\n\n## Deploy on Vercel\n\nThe easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.\n\nCheck out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.\n"
},
{
"path": "site/components/code.tsx",
"content": "import clsx from 'clsx';\nimport Highlight, {\n defaultProps,\n Language,\n PrismTheme,\n} from 'prism-react-renderer';\n\nconst theme: PrismTheme = {\n plain: {\n backgroundColor: '#351e11',\n color: '#d6ceff',\n },\n styles: [\n {\n types: ['comment', 'prolog', 'doctype', 'cdata', 'punctuation'],\n style: {\n color: '#6c6783',\n },\n },\n {\n types: ['namespace'],\n style: {\n opacity: 0.7,\n },\n },\n {\n types: ['tag', 'operator', 'number', 'module'],\n style: {\n color: '#e09142',\n },\n },\n {\n types: ['property', 'function'],\n style: {\n color: '#9a86fd',\n },\n },\n {\n types: ['tag-id', 'selector', 'atrule-id'],\n style: {\n color: '#eeebff',\n },\n },\n {\n types: ['attr-name'],\n style: {\n color: '#c4b9fe',\n },\n },\n {\n types: [\n 'boolean',\n 'string',\n 'entity',\n 'url',\n 'attr-value',\n 'keyword',\n 'control',\n 'directive',\n 'unit',\n 'statement',\n 'regex',\n 'at-rule',\n 'placeholder',\n 'variable',\n ],\n style: {\n color: '#ffcc99',\n },\n },\n {\n types: ['deleted'],\n style: {\n textDecorationLine: 'line-through',\n },\n },\n {\n types: ['inserted'],\n style: {\n textDecorationLine: 'underline',\n },\n },\n {\n types: ['italic'],\n style: {\n fontStyle: 'italic',\n },\n },\n {\n types: ['important', 'bold'],\n style: {\n fontWeight: 'bold',\n },\n },\n {\n types: ['important'],\n style: {\n color: '#c4b9fe',\n },\n },\n ],\n};\n\nexport const Code: React.FC<{\n snippet: string;\n language?: Language;\n className?: string;\n}> = (props) => {\n const language = props.language || 'jsx';\n\n return (\n \n {({ className, style, tokens, getLineProps, getTokenProps }) => (\n \n {tokens.map((line, i) => {\n if (tokens.length - 1 === i && line[0].empty) {\n return null;\n }\n\n return (\n
\n {line.map((token, key) => (\n \n ))}\n
\n );\n })}\n \n )}\n \n );\n};\n"
},
{
"path": "site/components/docs-layout.tsx",
"content": "import * as React from 'react';\nimport { Toaster } from 'react-hot-toast';\nimport { NextSeo } from 'next-seo';\nimport Link from 'next/link';\nimport { Footer } from './sections/footer';\nimport Logo from '../assets/logo-small.svg';\n\nconst TableItem: React.FC<{\n href: string;\n children?: React.ReactNode;\n}> = ({ children, href }) => (\n \n \n {children}\n \n \n);\n\nconst TableHeader: React.FC<{\n children?: React.ReactNode;\n}> = ({ children }) => (\n \n {children}\n \n);\n\nexport default function DocsLayout({ meta, children }) {\n return (\n
\n );\n },\n code: (props) =>\n props.className ? (\n \n ) : (\n \n ),\n};\n\nfunction MyApp({ Component, pageProps }) {\n return (\n <>\n \n {process.browser && (\n \n )}\n \n \n \n \n \n \n \n );\n}\n\nexport default MyApp;\n"
},
{
"path": "site/pages/docs/index.mdx",
"content": "import Layout from '../../components/docs-layout';\nimport toast from 'react-hot-toast';\n\nexport const meta = {\n title: 'Documentation',\n};\n\nexport default ({ children }) => {children};\n\n# Getting Started\n\nAdd beautiful notifications to your React app with [react-hot-toast](https://github.com/timolins/react-hot-toast).\n\n### Install with pnpm\n\n```sh\npnpm add react-hot-toast\n```\n\n### Install with NPM\n\n```sh\nnpm install react-hot-toast\n```\n\n## Basic usage\n\n```jsx\nimport toast, { Toaster } from 'react-hot-toast';\n\nconst notify = () => toast('Here is your toast.');\n\nconst App = () => {\n return (\n
\n \n \n
\n );\n};\n```\n"
},
{
"path": "site/pages/docs/multi-toaster.mdx",
"content": "import Layout from '../../components/docs-layout';\nimport toast, { Toaster } from 'react-hot-toast';\n\nexport const meta = {\n title: 'Multiple Toasters',\n};\n\nexport default ({ children }) => {children};\n\n# Multiple Toasters\n\nReact Hot Toast supports multiple toaster instances in your app, They can be used and configured independently of each other. This is useful for having notifications in different areas of your app.\n\nYou can use multiple toasters by creating a [`Toaster`](/docs/toaster) with a unique `toasterId`:\n\n```jsx\n\n```\n\n## Example\n\nThis example shows two toasters, each maintaining their own state and configuration.\n\n
\n
\n
Area 1
\n \n toast('Notification for Area 1', { toasterId: 'area1' })}\n className=\"bg-toast-600 text-white px-4 py-2 rounded-lg hover:bg-toast-600 w-full\"\n >\n Show Toast in Area 1\n \n
\n\n
\n
Area 2
\n \n toast('Notification for Area 2', { toasterId: 'area2' })}\n className=\"text-white px-4 py-2 rounded-lg bg-[#9a86fd] w-full\"\n >\n Show Toast in Area 2\n \n
\n
\n\n## Basic Usage\n\nYou can create multiple toasters providing unique `toasterId` to each `` component:\n\n```jsx\n// Create a toaster with a unique id\n\n\n// Create another toaster with a unique id\n\n```\n\nTo create a toast in a specific toaster, you can pass the `toasterId` to the `toast` function.\n\n```jsx\n// Create a toast in area 1\ntoast('Notification for Area 1', {\n toasterId: 'area1',\n});\n```\n\nWhen no `toasterId` is provided, it uses `\"default\"` as the `toasterId`.\n\n### Positioning the toaster\n\nWhen placing a toaster in a specific area of your app, set the position to `absolute` and the parent element to `relative`.\n\n```jsx\n
\n \n
\n```\n"
},
{
"path": "site/pages/docs/styling.mdx",
"content": "import Layout from '../../components/docs-layout';\nimport toast from 'react-hot-toast';\n\nexport const meta = {\n title: 'Styling',\n};\n\nexport default ({ children }) => {children};\n\n# Styling\n\nYou can style your notifications globally with the `toastOptions` inside the Toaster component, or for each notification manually.\n\n### Set default for all toasts\n\n```jsx\n\n```\n\n### Set default for specific types\n\n```jsx\n\n```\n\n### Style per toast\n\n```jsx\ntoast('I have a border.', {\n style: {\n border: '1px solid black',\n },\n});\n```\n\n## Change the offset\n\nIf you want to change the offset of your notifications, you can adapt the absolute position in `containerStyle`.\n\n```jsx\n\n```\n\n## Change position of the toaster\n\nBy default, the toaster is position fixed in the window. If you want to place it somewhere else, you can overwrite the position with `containerStyle`.\n\n```jsx\n\n```\n\n## Change offset between toasts\n\nIf you want to change the offset between notifications change the gutter.\n\n```jsx\n\n```\n\n## Change icon color\n\nAll icon colors can be changed by supplying a `iconTheme` with a `primary` & `secondary` color.\n\n```jsx\n\n```\n\n## Change enter and exit animations\n\nIn this example, we provide a render function with the default ``. We overwrite the animation style based on the current state.\n\n```jsx\nimport { Toaster, ToastBar } from 'react-hot-toast';\n\n\n {(t) => (\n \n )}\n;\n```\n"
},
{
"path": "site/pages/docs/toast-bar.mdx",
"content": "import Layout from '../../components/docs-layout';\nimport toast from 'react-hot-toast';\n\nexport const meta = {\n title: ' API',\n};\n\nexport default ({ children }) => {children};\n\n# `` API\n\nThis 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.\n\n## Available options\n\n```jsx\n\n```\n\n## Add custom content\n\nYou 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.\n\n### Add a dismiss button\n\nIn this example we add a basic dismiss button to all toasts, except if the loading one.\n\n```jsx\nimport { toast, Toaster, ToastBar } from 'react-hot-toast';\n\n\n {(t) => (\n \n {({ icon, message }) => (\n <>\n {icon}\n {message}\n {t.type !== 'loading' && (\n \n )}\n \n )}\n \n )}\n;\n```\n"
},
{
"path": "site/pages/docs/toast.mdx",
"content": "import Layout from '../../components/docs-layout';\nimport toast from 'react-hot-toast';\n\nexport const meta = {\n title: 'toast() API',\n};\n\n# `toast()` API\n\nCall it to create a toast from anywhere, even outside React. Make sure you add the [``](/docs/toaster) component to your app first.\n\n## Available toast options\n\nYou can provide `ToastOptions` as the second argument. They will overwrite all options received from [``](/docs/toaster).\n\n```js\ntoast('Hello World', {\n duration: 4000,\n position: 'top-center',\n\n // Styling\n style: {},\n className: '',\n\n // Custom Icon\n icon: '๐',\n\n // Change colors of success/error/loading icon\n iconTheme: {\n primary: '#000',\n secondary: '#fff',\n },\n\n // Aria\n ariaProps: {\n role: 'status',\n 'aria-live': 'polite',\n },\n\n // Additional Configuration\n removeDelay: 1000,\n\n // Toaster instance\n toasterId: 'default',\n});\n```\n\n## Creating a toast\n\n### Blank\n\n```js\ntoast('Hello World');\n```\n\nThe 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.\n\n### Success\n\n```js\ntoast.success('Successfully created!');\n```\n\nCreates a notification with an animated checkmark. It can be themed with the `iconTheme` option.\n\n### Error\n\n```js\ntoast.error('This is an error!');\n```\n\nCreates a notification with an animated error icon. It can be themed with the `iconTheme` option.\n\n### Custom (JSX)\n\n```js\ntoast.custom(
Hello World
);\n```\n\nCreates a custom notification with JSX without default styles.\n\n### Loading\n\n```js\ntoast.loading('Waiting...');\n```\n\nThis 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.\n\n### Promise\n\nThis shorthand is useful for mapping a promise to a toast. It will update automatically when the promise resolves or fails.\n\n#### Simple Usage\n\n```js\nconst myPromise = fetchData();\n\ntoast.promise(myPromise, {\n loading: 'Loading',\n success: 'Got the data',\n error: 'Error when fetching',\n});\n```\n\nIt's recommend to add min-width to your `toast.promise()` calls to **prevent jumps** from different message lengths.\n\n#### Advanced\n\nYou 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)\n\n```js\ntoast.promise(\n myPromise,\n {\n loading: 'Loading',\n success: (data) => `Successfully saved ${data.name}`,\n error: (err) => `This just happened: ${err.toString()}`,\n },\n {\n style: {\n minWidth: '250px',\n },\n success: {\n duration: 5000,\n icon: '๐ฅ',\n },\n }\n);\n```\n\n#### Using an Async Function\n\nYou can also provide a function that returns a promise, which will be called automatically.\n\n```js\ntoast.promise(\n async () => {\n const { id } = await fetchData1();\n await fetchData2(id);\n },\n {\n loading: 'Loading',\n success: 'Got the data',\n error: 'Error when fetching',\n }\n);\n```\n\n## Default durations\n\nEvery 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).\n\n| type | duration |\n| --------- | -------- |\n| `blank` | 4000 |\n| `error` | 4000 |\n| `success` | 2000 |\n| `custom` | 4000 |\n| `loading` | Infinity |\n\n### Dismiss toast programmatically\n\nYou 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.\n\n#### Dismiss a single toast\n\n```js\nconst toastId = toast.loading('Loading...');\n\n// ...\n\ntoast.dismiss(toastId);\n```\n\nYou can dismiss all toasts at once, by leaving out the `toastId`.\n\n#### Dismiss all toasts at once\n\n```js\ntoast.dismiss();\n```\n\nTo remove toasts instantly without any animations, use `toast.remove`.\n\n#### Configure remove delay\n\n```js\ntoast.success('Successfully created!', { removeDelay: 500 });\n```\n\nBy 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.\n\nOr, for all toasts, using the Toaster like so:\n\n```js\n\n```\n\n#### Remove toasts instantly\n\n```js\ntoast.remove(toastId);\n\n// or\n\ntoast.remove();\n```\n\n### Update an existing toast\n\nEach toast call returns a unique id. Use in the toast options to update the existing toast.\n\n```js\nconst toastId = toast.loading('Loading...');\n\n// ...\n\ntoast.success('This worked', {\n id: toastId,\n});\n```\n\n### Prevent duplicate toasts\n\nTo prevent duplicates of the same kind, you can provide a unique permanent id.\n\n```js\ntoast.success('Copied to clipboard!', {\n id: 'clipboard',\n});\n```\n\n### Render JSX custom content\n\nYou can provide a React component instead of text. If you don't want any default styles use `toast.custom()` instead.\n\n```jsx\ntoast(\n \n Custom and bold\n ,\n {\n icon: ,\n }\n);\n```\n\nYou 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.\n\n```jsx\ntoast(\n (t) => (\n \n Custom and bold\n \n \n ),\n {\n icon: ,\n }\n);\n```\n\nexport default ({ children }) => {children};\n"
},
{
"path": "site/pages/docs/toaster.mdx",
"content": "import Layout from '../../components/docs-layout';\nimport toast from 'react-hot-toast';\n\nexport const meta = {\n title: ' API',\n};\n\nexport default ({ children }) => {children};\n\n# `` API\n\nThis component will render all toasts. Alternatively you can create own renderer with the headless [`useToaster()`](/docs/use-toaster) hook.\n\n## Available options\n\n```jsx\n\n```\n\n### `position` Prop\n\nYou can change the position of all toasts by modifying supplying `positon` prop.\n\n| Positions | | |\n| ----------- | ------------- | ------------ |\n| top-left | top-center | top-right |\n| bottom-left | bottom-center | bottom-right |\n\n### `reverseOrder` Prop\n\nToasts spawn at top by default. Set to `true` if you want new toasts at the end.\n\n### `containerClassName` Prop\n\nAdd a custom CSS class name to toaster div. Defaults to `undefined`.\n\n### `containerStyle` Prop\n\nCustomize the style of toaster div. This can be used to change the offset of all toasts\n\n### `gutter` Prop\n\nChanges the gap between each toast. Defaults to `8`.\n\n### `toasterId` Prop\n\nYou can change the toasterId to have a different toaster instance. Learn more about [multiple toasters](/docs/multi-toaster). Defaults to `\"default\"`.\n\n### `toastOptions` Prop\n\nThese will act as default options for all toasts. See [`toast()`](/docs/toast) for all available options.\n\n#### Type specific options\n\nYou can change the defaults for a specific type by adding, `success: {}`, `error: {}`, `loading: {}` or `custom: {}`.\n\n## Using a custom render function\n\nYou 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.\n\n### Minimal example\n\n```jsx\nimport { Toaster, resolveValue } from 'react-hot-toast';\n\n// In your app\n\n {(t) => (\n \n {resolveValue(t.message, t)}\n \n )}\n;\n```\n\n`resolveValue()` is needed to resolve all message types: Text, JSX or a function that resolves to JSX.\n\n### Adapting the default [``](/docs/toast-bar)\n\nYou can use this API to modify the default ToastBar as well. In this example we overwrite the animation style based on the current state.\n\n```jsx\nimport { Toaster, ToastBar } from 'react-hot-toast';\n\n\n {(t) => (\n \n )}\n;\n```\n\nCheck out the [``](/docs/toast-bar) docs for more options.\n"
},
{
"path": "site/pages/docs/use-toaster-store.mdx",
"content": "import Layout from '../../components/docs-layout';\nimport toast from 'react-hot-toast';\n\nexport const meta = {\n title: 'useToasterStore() API',\n};\n\nexport default ({ children }) => {children};\n\n# `useToasterStore()` API\n\nThis 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.\n\nIn comparison to [`useToaster()`](/docs/use-toaster) it does not handle pausing or provide handlers for creating your own notification system.\n\n```jsx\nimport { useToasterStore } from 'react-hot-toast';\n\nconst { toasts, pausedAt } = useToasterStore();\n```\n"
},
{
"path": "site/pages/docs/use-toaster.mdx",
"content": "import Layout from '../../components/docs-layout';\nimport toast from 'react-hot-toast';\n\nexport const meta = {\n title: 'useToaster() API',\n};\n\nexport default ({ children }) => {children};\n\n# `useToaster()` API\n\nThe `useToaster()` hook provides a **headless toast management system** for building custom notification UIs. It manages toast state and lifecycle without rendering any components.\n\nIt handles pausing on hover, auto-removal, and provides a 1-second removal delay with `visible` flag for smooth animations.\n\n**Alternative**: Use [`useToasterStore()`](/docs/use-toaster-store) if you already have a toaster instance and only need the state.\n\n### Importing\n\n```jsx\nimport { useToaster } from 'react-hot-toast';\n```\n\nYou can also import from the headless entry point to exclude UI components:\n\n```jsx\nimport { useToaster } from 'react-hot-toast/headless';\n```\n\n**Note**: [React Hot Toast 2.0](/docs/version-2) includes **custom render functions** for easier custom components.\n\n## API Reference\n\n### Parameters\n\n```tsx\nuseToaster(\n toastOptions?: DefaultToastOptions,\n toasterId?: string\n)\n```\n\n| Parameter | Type | Default | Description |\n| -------------- | --------------------- | ----------- | ----------------------------------------------- |\n| `toastOptions` | `DefaultToastOptions` | `undefined` | Default options for all toasts in this instance |\n| `toasterId` | `string` | `'default'` | Unique identifier for this toaster instance |\n\n### Returns\n\n```tsx\n{\n toasts: Toast[];\n handlers: {\n startPause: () => void;\n endPause: () => void;\n updateHeight: (toastId: string, height: number) => void;\n calculateOffset: (toast: Toast, options?: OffsetOptions) => number;\n };\n}\n```\n\n#### `toasts`\n\nArray of all toasts in this toaster instance, including hidden ones for animation purposes.\n\n#### `handlers`\n\n- **`startPause()`**: Pause all toast timers (useful for hover states)\n- **`endPause()`**: Resume all toast timers\n- **`updateHeight(toastId, height)`**: Update toast height for offset calculations\n- **`calculateOffset(toast, options)`**: Calculate vertical offset for toast positioning\n\n## Multiple Toasters\n\nYou can create multiple independent toaster instances by providing a unique `toasterId`. See the [Multiple Toasters](/docs/multi-toaster) guide for detailed examples.\n\n```jsx\nconst sidebar = useToaster({ duration: 5000 }, 'sidebar');\ntoast('Sidebar notification', { toasterId: 'sidebar' });\n```\n\n## Examples\n\n### Basic Implementation\n\n```jsx\nimport toast, { useToaster } from 'react-hot-toast/headless';\n\nconst Notifications = () => {\n const { toasts, handlers } = useToaster();\n const { startPause, endPause } = handlers;\n\n return (\n
\n );\n};\n\n// Create toasts from anywhere\ntoast('Hello World');\n```\n\n### Animated Implementation\n\nThis example uses all `toasts` (including hidden ones) to enable smooth animations. The `toast.visible` property controls opacity, while the 1-second removal delay provides time for exit animations.\n\n**Live Demo**: [CodeSandbox](https://codesandbox.io/s/react-hot-toast-usetoaster-headless-example-zw7op?file=/src/App.js)\n\n```jsx\nimport { useToaster } from 'react-hot-toast/headless';\n\nconst AnimatedNotifications = () => {\n const { toasts, handlers } = useToaster();\n const { startPause, endPause, calculateOffset, updateHeight } = handlers;\n\n return (\n \n {toasts.map((toast) => {\n const offset = calculateOffset(toast, {\n reverseOrder: false,\n gutter: 8,\n });\n\n const ref = (el) => {\n if (el && typeof toast.height !== 'number') {\n const height = el.getBoundingClientRect().height;\n updateHeight(toast.id, height);\n }\n };\n\n return (\n \n {toast.message}\n \n );\n })}\n \n );\n};\n```\n\n\n## Usage with React Native\n\nThe headless API works perfectly with React Native. View the [React Native example]() for implementation details.\n"
},
{
"path": "site/pages/docs/version-2.mdx",
"content": "import Layout from '../../components/docs-layout';\nimport toast from 'react-hot-toast';\n\nexport const meta = {\n title: 'react-hot-toast 2.0 changes',\n};\n\nexport default ({ children }) => {children};\n\n# What's new in react-hot-toast 2.0\n\nThis 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:\n\n
\n\nAs well as a many [other improvements and fixes](#changelog).\n\n## Introducing `toast.custom()`\n\nThis 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.\n\nThis API makes it super easy to add [Tailwind UI Notifications](https://tailwindui.com/components/application-ui/overlays/notifications) to your React app.\n\n```jsx\n// Minimal Example\ntoast.custom(
\n \n toast.custom((t) => (\n Hello from TailwindCSS! ๐
\n ))\n }\n className=\"bg-toast-800 text-toast-100 whitespace-nowrap py-1 px-3 shadow-md rounded-lg absolute mt-[-4.5rem] -ml-2 transform -translate-x-full left-full\">Run Example\n\n\nIn 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.\n\nInstead 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/).\n\n## Better accessibility\n\nThe prefers reduced motion is now respected by default. If react-hot-toast detects this setting, it will use fade transitions instead of sliding.\n\n## Smoother exit animation\n\nThe exit animation is now less hectic when you have multiple toasts stacked.\n\n## Per toast positioning\n\nFrom 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.\n\n```jsx\ntoast.success('Always at the bottom', {\n position: 'bottom-center',\n});\n```\n\n
\n {\n toast.success('Always at the bottom', {\n position: 'bottom-center',\n });\n }}>Run Example\n
\n\n## Relative positioning\n\nYou can now overwrite the default position of the toaster and place it anywhere you want.\n\n```jsx\n\n```\n\n## Simpler offset styling\n\nThere is now a `gutter` option to control the gap between toasts.\n\n```jsx\n\n```\n\nThe offset is now controlled by the Toaster and can be changed by overwriting the `top`, `right`, `bottom` and `left` styles.\n\n```jsx\n\n```\n\n## Custom Renderer API\n\nYou 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.\n\nThis is a great alternative if you are using [`useToaster()`](/docs/use-toaster) to render create custom notfications.\n\nThis 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).\n\n```jsx\nimport { toast, Toaster, ToastBar } from 'react-hot-toast';\n\nconst CustomToaster = () => (\n \n {(t) => (\n \n {({ icon, message }) => (\n <>\n {icon}\n {message}\n {t.type !== 'loading' && (\n \n )}\n \n )}\n \n )}\n \n);\n```\n\nThis 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.\n\n## Available now\n\nGet react-hot-toast 2.0 while it's hot. Upgrading from 1.0.0 should be seamless for most users.\n\n```sh\npnpm add react-hot-toast\n```\n\n## The future and beyond\n\nReact Hot Toast got a lot more flexible with this version, laying the **foundation for future releases**. Thanks to everyone who helped out; much appreciated!\n\nIn 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).\n\n---\n\n## Changelog\n\n### New\n\n- Easier Customization\n - Create your own toast renderer (without useToaster)\n - Support for custom render function in Toaster\n - Support for custom render function in ToastBar\n - `toast.custom()` - Render custom one-off toasts. No default styling will be applied.\n- Per toast positioning\n- New exit animation\n- Change the gutter between toasts with ``\n- Support for relative positioning\n- Respect reduce motion OS setting\n- Create persistent toasts with `duration: Infinity`\n\n### Breaking Changes\n\n- Use the `top`, `right`, `bottom`, `left` to in `containerStyle` to change the offset, instead of margin\n- Loading toasts no longer disappear after 30 seconds\n- `role` & `ariaLive` got moved into `ariaProps`\n- `useToaster()` no longer exposes `visibleToasts`\n- No longer expose `dispatch`\n"
},
{
"path": "site/pages/index.tsx",
"content": "import { NextSeo } from 'next-seo';\nimport toast, {\n Toaster,\n useToasterStore,\n ToastPosition,\n} from 'react-hot-toast';\nimport React, { useState } from 'react';\nimport clsx from 'clsx';\nimport Link from 'next/link';\n\nimport Logo from '../assets/logo.svg';\nimport Butter1 from '../assets/butter-1.svg';\nimport Butter2 from '../assets/butter-2.svg';\nimport GitHub from '../assets/github.svg';\nimport Checkmark from '../assets/checkmark.svg';\nimport { ToastExample } from '../components/sections/toast-example';\nimport { Footer } from '../components/sections/footer';\nimport { ToasterExample } from '../components/sections/toaster-example';\nimport { SplitbeeCounter } from '../components/sections/splitbee-counter';\n\nimport packageInfo from '../../package.json';\nconst version = packageInfo.version;\n\nconst Feature: React.FC<{ children?: React.ReactNode }> = ({ children }) => (\n
![\"react-hot-toast](\"https://github.com/timolins/react-hot-toast/raw/main/assets/header.svg\"/)
![\"Build](\"https://github.com/timolins/react-hot-toast/workflows/CI/badge.svg\"){kind=icon}
\n\n