react-hot-toast README

The project's README from github.com/timolins/react-hot-toast. As one markdown file: README.md.

react-hot-toast - Try it out

NPM Version minzipped size Build Status

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

Website · Documentation · Twitter

Cooked by Timo Lins 👨‍🍳

Features

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.

react-hot-toast (timolins/react-hot-toast)

Searching Database…

11K ·GitHub
React-hot-toast
What is this?react-hot-toast is a lightweight notification (toast) library for React apps, giving you customizable, beautiful-by-default popup messages out of the box.
Is it a UI framework or just a small library?It is a small headless React library: you drop in a Toaster component and call a toast() function, with optional useToaster() hook if you want to build your own UI.
How do I add it to my project?Install it with npm or pnpm, render the Toaster component once at the root of your app, then call toast() from anywhere to trigger a notification.
Does it need any extra setup like a CSS framework or state manager?No, it only depends on tiny internal packages (csstype and goober for styling) and Node >=10 for development; no external CSS framework or global state manager is required.
Will it bloat my bundle?No, the library is designed to stay tiny, under 5kb including its own styles.
Does it work with any React app, or do I need a specific framework?It's framework-agnostic within the React ecosystem, just a React component and hook, so it drops into any React or Next.js-style app.
Can it show a loading state automatically while a promise resolves?Yes, it has a built-in Promise API that automatically shows a loading toast and switches to success or error based on the promise outcome.
Can I style the toasts myself?Yes, toasts are easily customizable and you can also build fully custom toast UI using the headless useToaster() hook.
Is it accessible for screen reader users?Yes, the library states it is accessible out of the box.
Where can I find full API details?The official documentation site has the full API reference beyond what's in the README.
What are similar projects?chakra-ui, fluentui, base-ui, robot-heads, Semantic-UI-React, react-toastify, react-dropzone, shaders
Which topics is it in?react-components, notifications, accessibility, ui-components, react, npm, frontend, nodejs, library, typescript, javascript, web
Creator
timolins
Size
2.2 MB
Stars
11K
Updated
CommitSep 16Releasev2.6.1Sep 16
Age
5y
Commits · 90 Days