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 — это легковесная библиотека уведомлений (toast) для React-приложений, которая показывает всплывающие сообщения. Их можно настраивать, и по умолчанию они уже выглядят аккуратно.
Это UI-фреймворк или просто небольшая библиотека?Это небольшая библиотека для React без готового внешнего вида: вы добавляете компонент Toaster и вызываете функцию toast(). Если нужно свое оформление, можно использовать хук useToaster().
Как добавить её в проект?Установите её через npm или pnpm, один раз выведите компонент Toaster в корне приложения, а затем вызывайте toast() из любого места, чтобы показать уведомление.
Нужна ли дополнительная настройка, например CSS-фреймворк или менеджер состояния?Нет, для работы нужны только небольшие внутренние пакеты (csstype и goober для стилей) и Node >=10 для разработки. Внешний CSS-фреймворк или глобальный менеджер состояния не требуются.
Она сильно раздует мой бандл?Нет, библиотека создана так, чтобы оставаться очень маленькой: меньше 5 КБ вместе с собственными стилями.
Подойдёт ли она для любого React-приложения или нужен конкретный фреймворк?Она не привязана к конкретному фреймворку в экосистеме React: это всего лишь React-компонент и хук, поэтому её можно подключить к любому React- или Next.js-подобному приложению.
Может ли она сама показывать состояние загрузки, пока промис выполняется?Да, у неё есть встроенный Promise API: она автоматически показывает уведомление о загрузке, а затем переключается на успех или ошибку в зависимости от результата промиса.
Могу ли я сам оформить уведомления?Да, уведомления легко настраиваются. Также можно создать полностью свой интерфейс уведомлений с помощью хука useToaster() без встроенного оформления.
Она доступна для пользователей программ чтения с экрана?Да, в библиотеке заявлена доступность сразу из коробки.
Где найти полное описание 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