mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-28 15:14:12 +00:00
a9ab7afebf
#### Summary: This pull request addresses a documentation error found in the ShadCN website's Toast component example. Specifically, the import route for the hook is incorrect in the example. and fixes [#4816](https://github.com/shadcn-ui/ui/issues/4816) #### Issue: Upon reviewing the [ShadCN Toast documentation](https://ui.shadcn.com/docs/components/toast), I found that the import path for the Toast component hook was wrongly mentioned as being located in the `components` folder. According to the `component.json` file, the correct location of the hook is within the `hooks` folder inside the main directory. #### Fix: - Corrected the import path in the Toast component example from `components` to `hooks`, as per the `component.json` file structure. #### Example of Fix: **Before:** ```js import { useToast } from "@/components/use-toast"; ``` **After:** ```js import { useToast } from "@/hooks/use-toast"; ``` #### Testing: - Verified that the corrected path resolves correctly. - Ensured the example works as expected after the change. #### Impact: This fix prevents confusion for users following the example and ensures that the import path accurately reflects the project structure, improving the overall developer experience.
154 lines
2.6 KiB
Plaintext
154 lines
2.6 KiB
Plaintext
---
|
|
title: Toast
|
|
description: A succinct message that is displayed temporarily.
|
|
component: true
|
|
links:
|
|
doc: https://www.radix-ui.com/docs/primitives/components/toast
|
|
api: https://www.radix-ui.com/docs/primitives/components/toast#api-reference
|
|
---
|
|
|
|
<ComponentPreview name="toast-demo" />
|
|
|
|
## Installation
|
|
|
|
<Tabs defaultValue="cli">
|
|
|
|
<TabsList>
|
|
<TabsTrigger value="cli">CLI</TabsTrigger>
|
|
<TabsTrigger value="manual">Manual</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="cli">
|
|
|
|
<Steps>
|
|
|
|
<Step>Run the following command:</Step>
|
|
|
|
```bash
|
|
npx shadcn@latest add toast
|
|
```
|
|
|
|
<Step>Add the Toaster component</Step>
|
|
|
|
```tsx title="app/layout.tsx" {1,9}
|
|
import { Toaster } from "@/components/ui/toaster"
|
|
|
|
export default function RootLayout({ children }) {
|
|
return (
|
|
<html lang="en">
|
|
<head />
|
|
<body>
|
|
<main>{children}</main>
|
|
<Toaster />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
```
|
|
|
|
</Steps>
|
|
|
|
</TabsContent>
|
|
|
|
<TabsContent value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install @radix-ui/react-toast
|
|
```
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
`toast.tsx`
|
|
|
|
<ComponentSource name="toast" />
|
|
|
|
`toaster.tsx`
|
|
|
|
<ComponentSource name="toast" fileName="toaster" />
|
|
|
|
`use-toast.tsx`
|
|
|
|
<ComponentSource name="toast" fileName="use-toast" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
<Step>Add the Toaster component</Step>
|
|
|
|
```tsx title="app/layout.tsx" {1,9}
|
|
import { Toaster } from "@/components/ui/toaster"
|
|
|
|
export default function RootLayout({ children }) {
|
|
return (
|
|
<html lang="en">
|
|
<head />
|
|
<body>
|
|
<main>{children}</main>
|
|
<Toaster />
|
|
</body>
|
|
</html>
|
|
)
|
|
}
|
|
```
|
|
|
|
</Steps>
|
|
|
|
</TabsContent>
|
|
|
|
</Tabs>
|
|
|
|
## Usage
|
|
|
|
The `useToast` hook returns a `toast` function that you can use to display a toast.
|
|
|
|
```tsx
|
|
import { useToast } from "@/hooks/use-toast"
|
|
```
|
|
|
|
```tsx {2,7-10}
|
|
export const ToastDemo = () => {
|
|
const { toast } = useToast()
|
|
|
|
return (
|
|
<Button
|
|
onClick={() => {
|
|
toast({
|
|
title: "Scheduled: Catch up",
|
|
description: "Friday, February 10, 2023 at 5:57 PM",
|
|
})
|
|
}}
|
|
>
|
|
Show Toast
|
|
</Button>
|
|
)
|
|
}
|
|
```
|
|
|
|
<Callout>
|
|
|
|
To display multiple toasts at the same time, you can update the `TOAST_LIMIT` in `use-toast.tsx`.
|
|
|
|
</Callout>
|
|
|
|
## Examples
|
|
|
|
### Simple
|
|
|
|
<ComponentPreview name="toast-simple" />
|
|
|
|
### With title
|
|
|
|
<ComponentPreview name="toast-with-title" />
|
|
|
|
### With Action
|
|
|
|
<ComponentPreview name="toast-with-action" />
|
|
|
|
### Destructive
|
|
|
|
Use `toast({ variant: "destructive" })` to display a destructive toast.
|
|
|
|
<ComponentPreview name="toast-destructive" />
|