ndd-react/README.md

A lightweight, customizable toast notification library for React applications

# ND React

A lightweight, customizable toast notification library for React applications. Built with TypeScript and modern React practices, it provides an elegant way to display notifications in your React applications.

![npm](https://img.shields.io/npm/v/ndd-react)
![license](https://img.shields.io/npm/l/ndd-react)
![npm bundle size](https://img.shields.io/bundlephobia/min/ndd-react)

## Features

- 🎨 Four toast types: success, error, warning, and info
- 📍 Four positioning options: top-right, top-left, bottom-right, bottom-left
- ⚡ Lightweight and performant
- 🎯 TypeScript support
- 🎭 Customizable styling
- ⌛ Configurable duration
- 🔄 Progress bar animation

## Installation

```bash
npm install ndd-react
# or
yarn add ndd-react
# or
pnpm add ndd-react
```

## Usage

1. Wrap your app with the ToastProvider:

```tsx
import { ToastProvider } from 'ndd-react';

function App() {
  return (
    <ToastProvider>
      <YourApp />
    </ToastProvider>
  );
}
```

2. Add the ToastContainer component where you want to render the toasts(skip if you use ToastContainer in you app.jsx/tsx):

```tsx
import { ToastContainer } from 'ndd-react';

function YourApp() {
  return (
    <div>
      <YourComponents />
      <ToastContainer />
    </div>
  );
}
```

3. Use the useToast hook to show notifications:

```tsx
import { useToast } from 'ndd-react';

function YourComponent() {
  const { addToast } = useToast();

  const showToast = () => {
    addToast({
      message: 'Operation successful!',
      type: 'success',
      position: 'top-right',
      duration: 3000
    });
  };

  return (
    <button onClick={showToast}>
      Show Toast
    </button>
  );
}
```
4. Import the style.css file in your app.css:

```tsx
import 'ndd-react/style.css';
```
## API Reference

### ToastProvider

The context provider that enables the toast functionality.

```tsx
<ToastProvider>
  {children}
</ToastProvider>
```

### useToast Hook

A custom hook that provides toast functionality.

```tsx
const { addToast, removeToast } = useToast();
```

#### addToast Options

```typescript
interface ToastOptions {
  message: string;                // The toast message
  type?: 'success' | 'error' | 'warning' | 'info';  // Toast type (default: 'info')
  position?: 'top-right' | 'top-left' |
             'bottom-right' | 'bottom-left';  // Toast position (default: 'top-right')
  duration?: number;              // Duration in milliseconds (default: 3000)
}
```

### ToastContainer

The component that renders the toasts.

```tsx
<ToastContainer />
```

## Examples

### Different Toast Types

```tsx
// Success toast
addToast({
  message: 'Operation completed successfully!',
  type: 'success'
});

// Error toast
addToast({
  message: 'An error occurred!',
  type: 'error'
});

// Warning toast
addToast({
  message: 'Please review your input.',
  type: 'warning'
});

// Info toast
addToast({
  message: 'New updates available.',
  type: 'info'
});
```

### Custom Duration

```tsx
addToast({
  message: 'This toast will stay for 5 seconds',
  duration: 5000
});
```

### Different Positions

```tsx
addToast({
  message: 'Top center notification',
  position: 'top-center'
});

addToast({
  message: 'Bottom right notification',
  position: 'bottom-right'
});
```

## Feedback

We value your feedback! Please take a moment to fill out [feedback form](https://docs.google.com/forms/d/e/1FAIpQLSdRYw7BEgZmlZpvBpqHqv_UGhAXb6F_7tgaxaRFhel5hVJdRw/viewform) to help us improve.

## License

MIT