sonner README

The project's README from github.com/emilkowalski/sonner. As one markdown file: README.md.

https://github.com/vallezw/sonner/assets/50796600/59b95cb7-9068-4f3e-8469-0b35d9de5cf0

Sonner is an opinionated toast component for React. You can read more about why and how it was built here.

Usage

To start using the library, install it in your project:

npm install sonner

Alternatively you can use the /ask-sonner skill to do it for you and help you with any other Sonner-related questions.

npx skills add https://github.com/emilkowalski/skills --skill ask-sonner

Add <Toaster /> to your app, it will be the place where all your toasts will be rendered. After that you can use toast() from anywhere in your app.

import { Toaster, toast } from 'sonner';

// ...

function App() {
  return (
    <div>
      <Toaster />
      <button onClick={() => toast('My first toast')}>Give me a toast</button>
    </div>
  );
}

Documentation

Find the full API reference in the documentation.

sonner (emilkowalski/sonner)

Searching Database…

13.1K ·GitHub
Sonner
这是什么？Sonner 是一个有明确设计风格的 React 通知提示（toast）组件，可以在应用的任何位置显示通知消息。
它是完整的通知系统，还是只是一个组件？它是一个 React 组件库：你只需渲染一次 Toaster 组件，之后在任何位置调用一个函数即可触发通知提示。
怎么把它加到项目里？先把这个库安装到项目中，在应用里渲染 Toaster 组件，然后在任何位置调用 toast() 即可显示消息。
用它除了 React 还需要别的东西吗？不需要额外的后端或服务；另外还有一个 /ask-sonner 技能，可以帮你安装它，并回答与 Sonner 相关的问题。
在哪里可以找到所有配置选项？完整的 API 参考文档可以在项目文档中找到。
是否内置了样式？是的，库的构建产物中已包含 styles.css 文件，因此通知提示开箱即带样式，无需额外设置。
可以用它显示成功、错误或自定义的通知提示吗？作为一个通知提示组件库，常见用法是通过不同的变体调用 toast()；不过 README 本身只演示了基础用法，完整的 API 请参阅文档。
What are similar projects?react-toastify, rare-ui, chakra-ui, sweetalert2, ant-design-mobile, react-transition-group, react-bits, astryx
Which topics is it in?toast, reactjs, notifications, component-library, nextjs, ui-components, css, react, npm, frontend, library, typescript
Creator
emilkowalski
Size
1.4 MB
Stars
13.1K
Updated
CommitAug 10Releasev2.0.8Aug 09
Age
3y
Commits · 90 Days