@tahermax/react-toast v0.1.2

React Next Toast

A customizable toast notification library for React and Next.js applications.

Installation

npm install react-next-toast
# or
yarn add react-next-toast

## Usage with Next.js App Router

### 1. Set up the provider in your layout

Create a client component wrapper:

```jsx
// app/providers.js
'use client';

import { ToastProvider } from 'react-next-toast';

export function Providers({ children }) {
  return (
    <ToastProvider>
      {children}
    </ToastProvider>
  );
}

### 2. Use the toast hook in your client components

'use client';

import { useToast } from 'react-next-toast';

export default function MyComponent() {
  const toast = useToast();
  
  const handleClick = () => {
    toast.success('Operation completed successfully!', {
      position: 'bottom-right',
      duration: 3000,
      showProgress: true
    });
  };
  
  return (
    <button onClick={handleClick}>Show Success Toast</button>
  );
}


This guidance specifically addresses:

1. Using the `'use client'` directive which is required for React hooks and interactive components in the App Router
2. Setting up providers properly in a Next.js App Router project
3. Proper implementation in the root layout
4. How to use the hook in client components