react-hot-toast

About

Smoking hot React Notifications. Lightweight, customizable and beautiful by default.

What detecting react-hot-toast tells you about a site

react-hot-toast is a tiny, headless-ish notification library, so its presence tells you the app surfaces transient feedback (saved, copied, error retrying) and that the team picked a lightweight, opinionated solution over rolling their own toast system or pulling in a full UI kit's variant. It leans on a single Toaster mount and imperative toast() calls, which signals a codebase comfortable with side-effect-style UI triggers. Finding it usually marks a product with real interactive state changes worth acknowledging, not a static marketing page.

Why the exact react-hot-toast version matters

The library is small and has stayed API-stable, so the version matters less for breaking changes and more for dating the project and for accumulated fixes around promise-based toasts, accessibility and React 18 strict-mode rendering. Reading the exact version mainly tells you how current the surrounding React tooling likely is.

react-hot-toast in a real-world stack

When you find react-hot-toast in a bundle, it rarely travels alone. React, often with a form library like react-hook-form where submission feedback is needed.

Quick facts

Common pairings

Packages this one expects to find in the same project. Each is also a Sourcemap Explorer detection target.

What react-hot-toast pulls in

react-hot-toast declares 2 direct dependencies — each one also rides into any bundle that ships react-hot-toast, so they are detection targets too. Reading them is a quick way to understand the package's real footprint .

How Sourcemap Explorer detects react-hot-toast

react-hot-toast ships as v2.6.0, published 2025-08-15 and carries 2 direct dependencies, 2 peer dependencies (react, react-dom), 24 versions on the registry. Those exact numbers are the footprint Sourcemap Explorer matches when react-hot-toast rides inside a deployed bundle — here is how the detection works.

We catch react-hot-toast from two complementary signals: bundled source paths and the embedded package.json. Modern bundlers (webpack, Vite, esbuild, Rollup, Turbopack) preserve the original node_modules/react-hot-toast/ paths inside the JavaScript sourcemap's sources[] array — that's the canonical signal. When the matching package.json is also captured in sourcesContent[], we read the exact version field — patch number included. No regex guessing, no version inference.

1. 1

   Confirm the site exposes sourcemaps

   In DevTools Network, check the response headers of any application script for `SourceMap` or `X-SourceMap`. Failing that, fetch the script's last 4 KB and look for a `//# sourceMappingURL=` comment — that map is where the `react-hot-toast` paths live.

2. 2

   Find the package in the bundle

   Open DevTools → Network → reload. Click any application script and look at its sourcemap. Inside, search `sources[]` for entries matching `node_modules/react-hot-toast/` — every match confirms the package is bundled. The matching `sourcesContent[i]` for `node_modules/react-hot-toast/package.json` gives you the exact installed version.

3. 3

   Read the version directly from package.json

   Run `jq -r '. as $m | $m.sources | to_entries[] | select(.value | endswith("node_modules/react-hot-toast/package.json")) | $m.sourcesContent[.key] | fromjson | .version' bundle.js.map`. Sourcemap Explorer automates the same query in the popup.

Major releases of react-hot-toast

When each major version first landed. Major bumps are where breaking changes live, so this timeline is the fastest way to date the react-hot-toast version a site actually ships against the ecosystem.

Recent versions

react-hot-toast README

Live mirror of the GitHub README, for reference. Updated whenever the repo's default branch changes.

Smoking hot Notifications for React.

Lightweight, customizable and beautiful by default.

Website · Documentation · Twitter

_{Cooked by Timo Lins 👨‍🍳}

Features

• 🔥 Hot by default
• 🔩 Easily Customizable
• ⏳ Promise API - Automatic loader from a promise
• 🕊 Lightweight - less than 5kb including styles
• ✅ Accessible
• 🤯 Headless Hooks - Create your own with useToaster()

Installation

With pnpm

pnpm add react-hot-toast

With NPM

npm install react-hot-toast

Getting Started

Add the Toaster to your app first. It will take care of rendering all notifications emitted. Now you can trigger toast() from anywhere!

import toast, { Toaster } from 'react-hot-toast';

const notify = () => toast('Here is your toast.');

const App = () => {
  return (
    <div>
      <button onClick={notify}>Make me a toast</button>
      <Toaster />
    </div>
  );
};

Documentation

Find the full API reference on official documentation.

FAQ

Keep reading on Sourcemap Explorer