{"id":11719,"library":"react-hot-toast","title":"React Hot Toast Notifications","description":"react-hot-toast is a highly regarded, lightweight, and customizable React notification library designed to display \"smoking hot\" toast messages with minimal setup and a beautiful default aesthetic. Currently stable at version 2.6.0, the package maintains an active and responsive release cadence, frequently introducing new features and performance enhancements. Notable recent updates include support for multiple toasters in v2.6.0, enhanced React Server Components (RSC) compatibility for Next.js 13 App Router in v2.4.1, and significant bundle optimizations in v2.3.0. Its key differentiators include a powerful Promise API that automatically handles loading, success, and error states, an exceptionally small bundle size of less than 5kb, and versatile headless hooks (`useToaster`) for developers requiring complete control over the UI. The library is built with accessibility in mind and ships with TypeScript types, promoting robust and type-safe development practices. It provides a simple `Toaster` component and a `toast` function that can be called anywhere in your application.","status":"active","version":"2.6.0","language":"javascript","source_language":"en","source_url":"https://github.com/timolins/react-hot-toast","tags":["javascript","react","notifications","toast","snackbar","typescript"],"install":[{"cmd":"npm install react-hot-toast","lang":"bash","label":"npm"},{"cmd":"yarn add react-hot-toast","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-hot-toast","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required for React component rendering.","package":"react","optional":false},{"reason":"Peer dependency required for DOM rendering of React components.","package":"react-dom","optional":false},{"reason":"Runtime dependency added in v2.5.1 to avoid warnings related to CSS type definitions.","package":"csstype","optional":false}],"imports":[{"note":"The primary `toast` function is a default export. Using a named import for it is incorrect. Since v2.3.0-beta.1, the package is ESM compliant, impacting CommonJS `require` usage.","wrong":"import { toast } from 'react-hot-toast';","symbol":"toast","correct":"import toast from 'react-hot-toast';"},{"note":"The `Toaster` component is a named export. Attempting a default import will fail. CommonJS `require` patterns (`const { Toaster } = require('react-hot-toast');`) are supported but ESM is preferred since v2.3.0-beta.1.","wrong":"import Toaster from 'react-hot-toast';","symbol":"Toaster","correct":"import { Toaster } from 'react-hot-toast';"},{"note":"The `useToaster` hook is a named export, primarily used for headless implementations. Modern JavaScript projects should use ES Modules; direct CommonJS `require` might necessitate specific bundler configurations after v2.3.0-beta.1 changes for ESM compliance.","wrong":"const { useToaster } = require('react-hot-toast');","symbol":"useToaster","correct":"import { useToaster } from 'react-hot-toast';"}],"quickstart":{"code":"import toast, { Toaster } from 'react-hot-toast';\nimport React from 'react';\n\nconst notify = () => toast('Here is your toast.');\n\nconst App = () => {\n  return (\n    <div>\n      <button onClick={notify}>Make me a toast</button>\n      <Toaster />\n    </div>\n  );\n};\n\nexport default App;\n","lang":"typescript","description":"This example demonstrates how to integrate `react-hot-toast` by adding the `Toaster` component once to your application and then triggering notifications using the `toast` function from any part of your code. It shows a basic button click initiating a simple toast."},"warnings":[{"fix":"Ensure your project's bundler (e.g., Webpack, Rollup, Next.js) is configured to correctly handle ES Modules (`.mjs` files) and check your `package.json` resolutions if issues arise. Prefer ESM `import` statements over CommonJS `require`.","message":"The package moved to a new ESM compliant build setup using `.mjs` extensions and `tsup` for bundling. This could break existing CommonJS setups or older bundler configurations without proper resolution settings.","severity":"breaking","affected_versions":">=2.3.0-beta.1"},{"fix":"Add `'use client'` at the top of any component file where `react-hot-toast` components or hooks are used, particularly within a Next.js App Router context.","message":"Improved React Server Components (RSC) support for Next.js 13 App Router requires the 'use client' directive for components interacting with `react-hot-toast` to ensure they render in the client environment as expected.","severity":"gotcha","affected_versions":">=2.4.1"},{"fix":"Upgrade to `react-hot-toast@2.5.1` or newer to automatically include `csstype` as a dependency and resolve potential warnings.","message":"Prior to v2.5.1, `csstype` was not explicitly listed as a direct dependency, which could lead to warnings about missing peer dependencies in some environments or require manual installation.","severity":"gotcha","affected_versions":"<2.5.1"},{"fix":"Review your application's multi-toaster logic. If you were manually managing multiple `Toaster` instances, consider adopting the `id` prop on `Toaster` and the new `dismissAll(id?)` and `removeAll(id?)` functions for better control and integration.","message":"Version 2.6.0 introduces support for multiple toasters, along with new `dismissAll` and `removeAll` APIs. While adding functionality, existing custom multi-toaster implementations might benefit from refactoring to use the new ergonomic API, potentially affecting previous logic for managing multiple toast containers.","severity":"gotcha","affected_versions":">=2.6.0"},{"fix":"For headless use cases, explicitly import from `react-hot-toast/headless` if you were previously relying on other internal paths or if you experience build issues related to headless functionality.","message":"Version 2.3.0 significantly improved bundle setup and exposed a new `react-hot-toast/headless` entry point. Users consuming headless features from older versions might need to update their import paths or adapt to the new structure.","severity":"gotcha","affected_versions":">=2.3.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Refactor your imports to use ES Module syntax (e.g., `import toast from 'react-hot-toast';`) and ensure your build tools are configured for ESM.","cause":"Attempting to use CommonJS `require` syntax in an environment (e.g., modern Next.js, ES Modules in Node.js) that primarily expects or enforces ES Modules after the v2.3.0-beta.1 update.","error":"ReferenceError: require is not defined"},{"fix":"Upgrade `react-hot-toast` to version `2.4.0` or higher, which includes a fix for this infinite loop during testing.","cause":"This error, particularly during unit testing, was a known issue in versions prior to v2.4.0 due to an infinite loop in component rendering logic.","error":"Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate."},{"fix":"Ensure your promise resolution/rejection consistently provides an object with a `message` property for clear toast display, especially for older versions. Upgrade to `v2.5.1` or newer, which improved `toast.promise()` to make messages truly optional and allow async functions.","cause":"In versions prior to v2.5.1, the `toast.promise()` API made success/error messages optional, but some internal handling might not have gracefully managed promises resolving or rejecting without specific message properties, or incorrect promise usage.","error":"TypeError: Cannot read properties of undefined (reading 'message') when using toast.promise()"}],"ecosystem":"npm"}