# React Next Toast
A customizable toast notification library for React and Next.js applications with haptic feedback and sound effects.
## Features
- 🎨 Multiple toast types (success, error, info, warning)
- 🔊 Sound effects for each toast type
- 📳 Haptic feedback (vibration) support
- 🎯 Multiple positioning options
- ⚡ Smooth animations with Framer Motion
- 🌓 Dark mode support
- 📱 Responsive design
- 🔄 Progress bar option
- 🎭 Custom icons support
- 🎮 Swipe to dismiss
- ⏸️ Pause on hover
- ♿ Accessibility support
- 🎨 Customizable styling
## Installation
```bash
npm install haptic-sound-toast
# or
yarn add haptic-sound-toast
```
## Setup
### 1. Install Tailwind CSS(optional)
This package uses Tailwind CSS for styling. Make sure you have Tailwind CSS installed in your project:
```bash
npm install -D tailwindcss postcss autoprefixer
# or
yarn add -D tailwindcss postcss autoprefixer
```
### 2. Configure Tailwind CSS
Create a `tailwind.config.js` file in your project root:
```js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./app/**/*.{js,ts,jsx,tsx,mdx}",
"./pages/**/*.{js,ts,jsx,tsx,mdx}",
"./components/**/*.{js,ts,jsx,tsx,mdx}",
"./node_modules/haptic-sound-toast/**/*.{js,ts,jsx,tsx}"
],
theme: {
extend: {},
},
plugins: [],
}
```
### 3. Add Tailwind CSS to your project
Create a `globals.css` file in your project and add the Tailwind directives:
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
```
Import this CSS file in your root layout:
```jsx
// app/layout.tsx
import './globals.css'
```
### 4. Import the Toast Styles and Sounds
Import the toast styles and sounds in your root layout:
```jsx
// app/layout.tsx
import 'haptic-sound-toast/dist/styles.css'
import 'haptic-sound-toast/dist/sounds/success.mp3'
import 'haptic-sound-toast/dist/sounds/error.mp3'
import 'haptic-sound-toast/dist/sounds/info.mp3'
import 'haptic-sound-toast/dist/sounds/warning.mp3'
import 'haptic-sound-toast/dist/sounds/custom-alert.mp3'
```
Alternatively, you can copy the entire sounds directory to your public folder:
```bash
cp -r node_modules/haptic-sound-toast/dist/sounds public/sounds
```
Then update your `next.config.js` to include the sounds directory:
```js
/** @type {import('next').NextConfig} */
const nextConfig = {
webpack: (config) => {
config.module.rules.push({
test: /\.(mp3)$/i,
type: 'asset/resource',
});
return config;
},
}
module.exports = nextConfig
```
## Usage with Next.js App Router
### 1. Set up the provider in your root layout
First, create a new client component for the provider:
```jsx
// app/providers.tsx
'use client';
import { ToastProvider } from 'haptic-sound-toast';
export function Providers({ children }: { children: React.ReactNode }) {
return (
{children}
);
}
```
Then, use it in your root layout:
```jsx
// app/layout.tsx
import { Providers } from './providers';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
{children}
);
}
```
### 2. Use the toast hook in your client components
```jsx
'use client';
import { useToast } from 'haptic-sound-toast';
export default function MyComponent() {
// Initialize the toast hook
const toast = useToast();
const handleSuccess = () => {
toast.success('Operation completed successfully!', {
position: 'bottom-right',
duration: 3000,
showProgress: true
});
};
const handleError = () => {
toast.error('Something went wrong!', {
position: 'top-center',
duration: 5000,
vibration: true
});
};
const handleInfo = () => {
toast.info('New updates available', {
position: 'top-left',
sound: true
});
};
const handleWarning = () => {
toast.warning('Please save your changes', {
position: 'bottom-left',
pauseOnHover: true
});
};
return (
);
}
```
### Important Notes
1. Make sure to use the `'use client'` directive in any component that uses the `useToast` hook
2. The `ToastProvider` must wrap your application in the root layout
3. The `useToast` hook must be used within a component that is a child of `ToastProvider`
4. Do not use the `useToast` hook in the same file as the `ToastProvider` component
## Toast Options
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| type | string | 'info' | Toast type: 'success', 'error', 'info', 'warning' |
| position | string | 'top-center' | Toast position: 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right' |
| duration | number | 5000 | Duration in milliseconds before auto-dismiss |
| sound | boolean | true | Enable/disable sound effects |
| customSound | string | null | Custom sound file URL |
| vibration | boolean | true | Enable/disable haptic feedback |
| customVibration | number[] | null | Custom vibration pattern |
| showProgress | boolean | false | Show progress bar |
| pauseOnHover | boolean | true | Pause timer when hovering |
| swipeToClose | boolean | true | Enable swipe to dismiss |
| description | string | '' | Additional description text |
| customIcon | React.Component | null | Custom icon component |
| className | string | '' | Additional CSS classes |
| action | React.ReactNode | null | Custom action component |
## Customization
### Custom Sound Effects
Place your sound files in the `public/sounds` directory:
- success.mp3
- error.mp3
- info.mp3
- warning.mp3
### Custom Vibration Patterns
```jsx
toast.custom('Custom vibration pattern', {
customVibration: [100, 50, 200] // [vibrate, pause, vibrate]
});
```
### Custom Styling
```jsx
toast.custom('Custom styled toast', {
className: 'bg-purple-100 text-purple-800',
customIcon:
});
```
## Browser Support
- Chrome 50+
- Firefox 47+
- Safari 11.1+
- Edge 79+
## License
MIT
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.