{"type":"doc","content":[{"type":"heading","attrs":{"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"How to Implement Toast Notifications in React with Sonner"}]},{"type":"paragraph","content":[{"type":"text","text":"Toast notifications are those small messages that pop up on the screen to inform the user of an event without interrupting their workflow."}]},{"type":"paragraph","content":[{"type":"text","text":"Adding toasts to your React.js application is a fantastic way to enhance user experience by providing immediate feedback for actions."}]},{"type":"paragraph","content":[{"type":"text","text":"If you want to incorporate this feature into your app, the "},{"type":"text","marks":[{"type":"code"}],"text":"sonner"},{"type":"text","text":" library offers a simple and effective solution. Here's a straightforward guide to get you up and running with "},{"type":"text","marks":[{"type":"code"}],"text":"sonner"},{"type":"text","text":"."}]},{"type":"paragraph","content":[{"type":"text","text":"Begin by installing the "},{"type":"text","marks":[{"type":"code"}],"text":"sonner"},{"type":"text","text":" package. Open up your terminal and add it to your project with npm by running:"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"npm install sonner\n"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Get started"}]},{"type":"paragraph","content":[{"type":"text","text":"After installing "},{"type":"text","marks":[{"type":"code"}],"text":"sonner"},{"type":"text","text":", you'll need to render the "},{"type":"text","marks":[{"type":"code"}],"text":"Toaster"},{"type":"text","text":" component at the root of your application. This component is responsible for displaying the toast notifications. You can then use the "},{"type":"text","marks":[{"type":"code"}],"text":"toast"},{"type":"text","text":" function to trigger a toast anywhere in your app. Here's a basic example:"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"import { Toaster, toast } from 'sonner';\n\nfunction App() {\n return (\n

\n \n \n

\n );\n}\n"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Types of Toasts"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"Sonner"},{"type":"text","text":" allows you to customize the type of toast to match the context of the notification, such as success, info, warning, error, and more. You can also pass an options object as the second argument to further customize the toast:"}]},{"type":"bulletList","attrs":{"tight":true},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Default"},{"type":"text","text":": Use this for general notifications."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Success"},{"type":"text","text":": To indicate an action was completed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Info"},{"type":"text","text":": For informational messages."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Warning"},{"type":"text","text":": To warn the user."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Error"},{"type":"text","text":": For error messages."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Action"},{"type":"text","text":": To prompt the user to take an action."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Promise"},{"type":"text","text":": To handle asynchronous actions."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"bold"}],"text":"Custom"},{"type":"text","text":": For fully customized toasts."}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"For example, to show a success message, you could use:"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"toast.success('Event has been created');\n"}]},{"type":"paragraph","content":[{"type":"text","text":"Check out the docs "},{"type":"text","marks":[{"type":"link","attrs":{"href":"https://sonner.emilkowal.ski/","target":"_blank","rel":"noopener","class":"text-muted-foreground underline underline-offset-[3px] hover:text-primary transition-colors cursor-pointer"}},{"type":"underline"},{"type":"bold"}],"text":"here"},{"type":"text","text":" for a guide on using each."}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Positioning"}]},{"type":"paragraph","content":[{"type":"text","text":"The "},{"type":"text","marks":[{"type":"code"}],"text":"Toaster"},{"type":"text","text":" component allows you to specify the position of the toast notifications on the screen. The swipe direction for dismissing the toast changes depending on its position:"}]},{"type":"bulletList","attrs":{"tight":true},"content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"top-left"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"top-center"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"top-right"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"bottom-left"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"bottom-center"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"bottom-right"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"For example, to set the toasts to appear at the bottom-right corner of the screen:"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"\n"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Expand Option"}]},{"type":"paragraph","content":[{"type":"text","text":"You can control the amount of visible toasts through the "},{"type":"text","marks":[{"type":"code"}],"text":"expand"},{"type":"text","text":" prop on the "},{"type":"text","marks":[{"type":"code"}],"text":"Toaster"},{"type":"text","text":" component. Setting "},{"type":"text","marks":[{"type":"code"}],"text":"expand"},{"type":"text","text":" to "},{"type":"text","marks":[{"type":"code"}],"text":"false"},{"type":"text","text":" limits the number of toasts shown simultaneously:"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"\n"}]},{"type":"heading","attrs":{"level":3},"content":[{"type":"text","marks":[{"type":"bold"}],"text":"Additional Features"}]},{"type":"paragraph","content":[{"type":"text","marks":[{"type":"code"}],"text":"Sonner"},{"type":"text","text":" also supports rich colors for success, error, info, and warning toasts, a close button, and a headless mode for more customization:"}]},{"type":"codeBlock","attrs":{"language":null},"content":[{"type":"text","text":"// For a bit of color in your toast\ntoast.success('Woo something cool happened!')\n\n\n// For a close button\ntoast('You signed up for the newsletter', {\n description: 'Check your inbox to confirm your subsciption',\n})\n\n\n// Headless mode\ntoast.custom((t) => (\n

\n \n

\n));\n"}]}]}

Rank	User Info	Points
RE-O1	Creator Admin	944
RE-O2	Uncle Moses	592
RE-O3	Collinz Dev	48
RE-O4	Ian Sebugenyi	32
RE-O5	Iroid Tu	16
RE-O6	Nguyen Phan Anh Tuan	16
RE-O7	Mikita PitunouLevel 16	16
RE-O8	Kato IsaLevel 16	16
RE-O9	yiquan00Level 16	16
RE-10	Tracy VictoriaLevel 16	0

All Categories

Collect User Feedback As Code Free!!!

Leader Board