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…

13K ·GitHub
Sonner
Что это?Sonner — это компонент для всплывающих уведомлений (тостов) в React, который позволяет показывать сообщения из любой части приложения.
Это полноценная система уведомлений или просто компонент?Это библиотека из одного 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
13K
Updated
CommitAug 10Releasev2.0.8Aug 09
Age
3y
Commits · 90 Days