# Vyrn Toast - Quick Integration Guide
## Installation
```bash
npm install vyrn
```
## React Integration
1. **Add Toaster to your root component:**
```tsx
// App.tsx or main.tsx
import { Toaster } from 'vyrn';
function App() {
return (
<>
{/* Your app content */}
);
}
```
2. **Use toast anywhere:**
```tsx
import { toast } from 'vyrn';
// Basic usage
toast.success('Success message');
toast.error('Error message');
toast.info('Info message');
toast.warning('Warning message');
// With options
toast('Custom message', {
type: 'success',
duration: 5000
});
```
## Next.js Integration
1. **Add Toaster to your layout (App Router):**
```tsx
// app/layout.tsx
import { Toaster } from 'vyrn';
export default function RootLayout({ children }) {
return (
{children}
);
}
```
2. **Use toast in Server or Client Components:**
```tsx
// app/page.tsx or any component
'use client'; // Only if using in Client Component
import { toast } from 'vyrn';
export default function Page() {
return (
);
}
```
## Configuration Options
```tsx
```
### Rich Colors Mode
When `richColors` is enabled, you can use:
- `true` or `"minimal"`: borderless, premium clean look with semantic tints
- `"soft"`: subtle bordered variant with gentle surfaces
- `"solid"`: stronger color surfaces for high-contrast UIs
All variants support:
- Semantic backgrounds/icons for success, error, info, warning
- Proper defaults for `default` and `custom` toasts
- Matching dark mode variants
## API Methods
### Basic Methods
```tsx
toast.success(message, options?)
toast.error(message, options?)
toast.info(message, options?)
toast.warning(message, options?)
toast.default(message, options?)
toast(message, options?) // Alias for toast.default
```
### Advanced Methods
```tsx
toast.promise(promise, options) // Promise-based toast with loading/success/error states
toast.loading(message, options?) // Loading toast
toast.custom(content, options?) // Custom toast with JSX content
toast.update(id, updates) // Update existing toast
toast.dismiss(id) // Dismiss specific toast
toast.clearAll() // Clear all toasts
```
## Toast Options
```tsx
toast.success('Message', {
description: 'Optional description text',
duration: 3000, // Duration in ms (0 = infinite)
icon: , // Custom icon component
actions: [ // Action buttons
{
label: 'Action',
onClick: () => {},
style: 'primary' // default, primary, secondary, danger
}
],
input: { // Input field
placeholder: 'Enter text',
onSubmit: (value) => {}
},
priority: 'normal', // low, normal, high
expandable: true, // Make toast expandable
onClick: () => {}, // Click handler for toast
onClose: () => {}, // Callback when toast closes
className: '', // Custom CSS class
customStyles: {}, // Custom inline styles
showCloseButton: true, // Override global setting
showProgressBar: true, // Override global setting
})
```
## Examples
### Promise-Based Toast
```tsx
toast.promise(
fetch('/api/data'),
{
loading: 'Loading...',
success: 'Data loaded!',
error: 'Failed to load',
description: 'Fetching data from server',
cancel: {
label: 'Cancel',
onClick: () => {}
}
}
)
```
### Toast with Actions
```tsx
toast.success('File uploaded', {
description: 'Your file has been uploaded',
actions: [
{ label: 'View', onClick: () => {}, style: 'primary' },
{ label: 'Dismiss', onClick: () => {}, style: 'default' }
]
})
```
### Toast with Input
```tsx
toast.info('Enter your name', {
input: {
placeholder: 'Name',
onSubmit: (value) => {
toast.success(`Hello, ${value}!`)
}
}
})
```
### Loading Toast
```tsx
const id = toast.loading('Processing...')
// Later update it
toast.update(id, { content: 'Done!', type: 'success' })
```
### Custom Toast
```tsx
toast.custom(
Custom Content
This is a custom toast!
,
{ duration: 5000 }
)
```
### Expandable Toast
```tsx
toast.info('Click to expand', {
expandable: true,
actions: [
{ label: 'Action 1', onClick: () => {} }
]
})
```
**No `transpilePackages` needed for Next.js!** The package is pre-configured for Next.js App Router.