haptic-sound-toast

v0.1.10

Published

a year ago

A customizable toast notification library for Next.js and React

0High
0Medium
0Low

react nextjs toast haptic-sound-toast sound-toast haptic-toast vibration vibration-toast notification ui component framer-motion

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

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:

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:

/** @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:

@tailwind base;
@tailwind components;
@tailwind utilities;

Import this CSS file in your root layout:

// app/layout.tsx
import './globals.css'

4. Import the Toast Styles and Sounds

Import the toast styles and sounds in your root layout:

// 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:

cp -r node_modules/haptic-sound-toast/dist/sounds public/sounds

Then update your next.config.js to include the sounds directory:

/** @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:

// app/providers.tsx
'use client';

import { ToastProvider } from 'haptic-sound-toast';

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <ToastProvider>
      {children}
    </ToastProvider>
  );
}

Then, use it in your root layout:

// app/layout.tsx
import { Providers } from './providers';

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <Providers>
          {children}
        </Providers>
      </body>
    </html>
  );
}

2. Use the toast hook in your client components

'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 (
    <div className="space-x-4">
      <button onClick={handleSuccess}>Show Success Toast</button>
      <button onClick={handleError}>Show Error Toast</button>
      <button onClick={handleInfo}>Show Info Toast</button>
      <button onClick={handleWarning}>Show Warning Toast</button>
    </div>
  );
}

Important Notes

Make sure to use the 'use client' directive in any component that uses the useToast hook
The ToastProvider must wrap your application in the root layout
The useToast hook must be used within a component that is a child of ToastProvider
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

toast.custom('Custom vibration pattern', {
  customVibration: [100, 50, 200] // [vibrate, pause, vibrate]
});

Custom Styling

toast.custom('Custom styled toast', {
  className: 'bg-purple-100 text-purple-800',
  customIcon: <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.