Introduction to Sonner Toast in China

Sonner toast, a beloved culinary delight in China, represents more than just a snack; it embodies a rich cultural heritage and social tradition. This guide delves into the origins, variations, and significance of sonner toast, offering readers a comprehensive understanding of its place in Chinese cuisine.

As we explore the diverse flavors and preparation methods, readers will discover how sonner toast has evolved over time. From street vendors to upscale restaurants, this dish showcases the creativity and adaptability of Chinese gastronomy.

Additionally, this guide will highlight the cultural rituals and communal aspects associated with sonner toast. Understanding these elements will enrich your appreciation of this delightful treat and its role in fostering connections among people.

By the end of this guide, readers will be equipped with knowledge about sonner toast’s history, recipes, and cultural significance. Whether you’re a culinary enthusiast or simply curious about Chinese food, this exploration promises to be both informative and enjoyable.

A Comprehensive Guide to Sonner Toast in China

Sonner is an opinionated toast component for React that provides a simple and elegant way to display notifications in your applications. With its customizable features and easy integration, Sonner has become a popular choice among developers looking to enhance user experience through effective messaging. This guide will delve into the technical features, types of toasts, and how to implement Sonner in your projects.

Technical Features of Sonner

Sonner offers a variety of technical features that make it a robust choice for displaying notifications. Below is a comparison table highlighting some of its key features:

Feature	Description	Default Value
`duration`	Time in milliseconds before the toast automatically dismisses.	4000
`position`	Position of the toast on the screen (e.g., top-right, bottom-left).	bottom-right
`dismissible`	Whether the toast can be dismissed by the user.	true
`icon`	Custom icon to display alongside the toast message.	–
`action`	Button to perform an action when clicked.	–
`cancel`	Button to cancel the action associated with the toast.	–
`className`	Custom CSS class for styling the toast.	–
`description`	Additional text to provide more context about the toast.	–
`onDismiss`	Callback function triggered when the toast is dismissed.	–
`onAutoClose`	Callback function triggered when the toast automatically closes.	–

Types of Toasts

Sonner supports various types of toasts, each designed for different scenarios. The following table summarizes the different types of toasts available:

Type	Description	Example Code
Success	Displays a success message with a checkmark icon.	`toast.success('Operation successful!');`
Error	Displays an error message with an error icon.	`toast.error('An error occurred!');`
Action	Displays a toast with an action button that performs a callback.	`toast('Action required!', { action: { label: 'Retry', onClick: () => console.log('Retrying...') } });`
Cancel	Displays a toast with a cancel button that performs a callback.	`toast('Are you sure?', { cancel: { label: 'No', onClick: () => console.log('Cancelled!') } });`
Promise	Displays a loading state and updates based on the promise’s resolution.	`toast.promise(myPromise, { loading: 'Loading...', success: 'Loaded!', error: 'Failed!' });`
Custom	Allows rendering of custom JSX for the toast.	`toast(, { duration: 5000 });`

Implementing Sonner in Your Project

To get started with Sonner, you need to install it in your React project. You can do this by running the following command:

bash npm install sonner

Once installed, you can render the “ component in your application. This component will serve as the container for all your toasts. Here’s a simple example of how to use Sonner in your app:

“`javascript
import { Toaster, toast } from ‘sonner’;

function App() {
return (

toast(‘My first toast’)}>Give me a toast

);
}
“`

In this example, clicking the button will trigger a toast notification that says “My first toast”. You can customize the toast further by passing options as the second argument to the toast() function.

Customizing Toasts

Sonner allows for extensive customization of toast notifications. You can change the position, duration, and even the styling of the toasts. For instance, to change the position of the toast to the top-center, you can do the following:

javascript toast('Hello World', { position: 'top-center', });

Additionally, you can customize the appearance of the toast by using the className property to apply your own CSS styles.

Conclusion

Sonner is a powerful and flexible toast component for React that enhances user interaction through effective notifications. With its customizable features and various types of toasts, developers can easily integrate it into their applications. Whether you are building a simple app or a complex web application, Sonner provides the tools you need to keep your users informed and engaged.

FAQs

1. What is Sonner?
Sonner is an opinionated toast component for React that allows developers to display notifications in a customizable manner.

2. How do I install Sonner?
You can install Sonner by running the command npm install sonner in your project directory.

3. Can I customize the appearance of the toasts?
Yes, you can customize the appearance of the toasts using the className property and by passing options to the toast() function.

4. What types of toasts does Sonner support?
Sonner supports various types of toasts, including success, error, action, cancel, promise, and custom toasts.

5. Where can I find more information about Sonner?
You can find more information about Sonner on its official website at sonner.emilkowal.ski, as well as on npm at www.npmjs.com.