react-toastify README

The project's README from github.com/fkhadra/react-toastify. As one markdown file: README.md.

React-Toastify

Financial Contributors on Open Collective React-toastify CI npm npm NPM Coveralls github

React toastify

stacked

custom-style

🎉 React-Toastify allows you to add notifications to your app with ease.

Installation

$ npm install --save react-toastify
$ yarn add react-toastify

  import React from 'react';

  import { ToastContainer, toast } from 'react-toastify';
  
  function App(){
    const notify = () => toast("Wow so easy!");

    return (
      <div>
        <button onClick={notify}>Notify!</button>
        <ToastContainer />
      </div>
    );
  }

Documentation

Check the documentation to get you started!

Features

Demo

A demo is worth a thousand words

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! Take a look at the contributing guide.

You can also find me on reactiflux. My pseudo is Fadi.

Contributors

Code Contributors

This project exists thanks to all the people who contribute. [Contribute].

Financial Contributors

Become a financial contributor and help us sustain our community. [Contribute]

Individuals

Organizations

Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]

Release Notes

You can find the release note for the latest release here

You can browse them all here

License

Licensed under MIT

react-toastify (fkhadra/react-toastify)

Searching Database…

13.4K ·GitHub
React-toastify
这是什么？React-Toastify 是一个 React 库，让你只需少量设置就能在应用中添加通知弹窗。
它是 UI 库还是完整的框架？它是一个轻量的 React 组件库，只专注于通知弹窗，不是完整的 UI 框架。
怎么把它加到项目里？通过 npm/pnpm/yarn 把它作为依赖安装，导入 ToastContainer 和 CSS，然后调用 toast 函数触发通知；README 称 10 秒内就能跑起来。
使用它还需要额外的库吗？运行时只需要 'clsx' 这一个依赖；开箱即用，也可以选择搭配 animate.css 之类的动画库。
设置时必须支持自定义动画吗？不必须，自定义动画是可选的。库自带默认动画，如果需要，也可以接入任何动画库。
我能在通知弹窗里渲染自定义的 React 组件吗？可以，库允许在弹窗中显示完整的 React 组件，并可以使用 hooks 访问传给它的 props。
它支持滑动手势和 RTL 布局吗？支持。它内置滑动关闭功能，方向可配置，并内置 RTL（从右到左）支持。
弹窗显示后，我还能控制或更新它吗？可以，你可以通过代码更新弹窗、移除弹窗、暂停其计时器、像 nprogress 那样控制其进度条，还能限制同时显示的弹窗数量。
它支持深色模式和堆叠通知吗？支持。它内置深色模式，并支持堆叠通知，还有显示剩余时间的进度条。
What are similar projects?sonner, rare-ui, react-transition-group, react-hot-toast, sweetalert2, swiper, drawably, react-select
Which topics is it in?react-component, toast, reactjs, ui-components, animation, css, react, npm, frontend, library, typescript, javascript
Creator
fkhadra
Size
16.3 MB
Stars
13.4K
Updated
CommitApr 19Releasev11.1.0Apr 19
Age
9y
Commits · 90 Days