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
这是什么？react-hot-toast 是一个轻量的 React 应用通知（toast）库，开箱即用，提供可自定义、默认就很美观的弹出消息。
它是 UI 框架，还是只是一个小库？它是一个小型无头（headless）React 库：你引入 Toaster 组件并调用 toast() 函数即可；如果想自己构建界面，也可以使用 useToaster() 钩子。
我该怎么把它加到项目里？用 npm 或 pnpm 安装，在应用的根组件中渲染一次 Toaster 组件，然后在任何地方调用 toast() 即可触发通知。
它是否需要额外配置，比如 CSS 框架或状态管理器？不需要。它只依赖几个体积很小的内部包（csstype，以及用于样式的 goober），开发时需要 Node >=10；不需要外部 CSS 框架，也不需要全局状态管理器。
它会让我的打包体积变大吗？不会。该库设计得非常小，包括其自带样式在内，体积不到 5kb。
它能用于任何 React 应用吗，还是我需要特定的框架？它与具体框架无关，只要是在 React 生态中即可：它就是一个 React 组件和钩子，因此可以用于任何 React 应用或类似 Next.js 的应用。
能否在 Promise 完成前自动显示加载状态？可以。它内置了 Promise API，会自动显示加载中的 toast，并根据 Promise 的结果切换为成功或失败提示。
我能自己定制 toast 的样式吗？可以。toast 很容易自定义，你也可以借助无头的 useToaster() 钩子，完全自己构建 toast 界面。
它对屏幕阅读器用户友好吗？友好。该库声明开箱即具备无障碍支持。
在哪里可以找到完整的 API 详情？官方文档网站提供了完整的 API 参考，内容比 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