react-notification-pro v1.0.19

React Notification Pro

A lightweight, customizable, and animated notification system for React applications.

Features

• 🎨 Multiple notification types (success, warning, error, info)
• 📍 5 positioning options (top-right, top-left, bottom-right, bottom-left, center)
• ⚡️ Smooth animations with customizable transitions
• ⏱️ Configurable duration with permanent notification support
• 🎯 Custom styling with CSS classes
• 📐 Adjustable width for notifications
• 🔄 Group notifications by position
• 🗑️ Clear all notifications at once
• 📱 Responsive design
• 🔧 TypeScript support

Installation

npm install react-notification-pro
# or
yarn add react-notification-pro

Quick Start

import { NotificationProvider, useNotification } from 'react-notification-pro';

// Wrap your app with NotificationProvider
function App() {
  return (
    <NotificationProvider>
      <YourApp />
    </NotificationProvider>
  );
}

// Use in any component
function YourComponent() {
  const { notify } = useNotification();

  const showNotification = () => {
    notify({
      type: 'success',
      title: 'Success',
      text: 'Operation completed successfully!',
      position: 'top-right',
      duration: 3000
    });
  };

  return <button onClick={showNotification}>Show Notification</button>;
}

API Reference

NotificationOptions

interface NotificationOptions {
  type: 'success' | 'warn' | 'error' | 'info';
  title?: string;
  text: string;
  position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'center';
  duration?: number;  // milliseconds (0 for permanent)
  width?: number;     // pixels
  classes?: string;   // custom CSS classes
}

useNotification Hook

const { notify, clear } = useNotification();

// Show notification
notify({
  type: 'success',
  title: 'Title',
  text: 'Message'
});

// Clear all notifications
clear();

Examples

Different Types

// Success notification
notify({
  type: 'success',
  title: 'Success',
  text: 'Operation completed'
});

// Warning notification
notify({
  type: 'warn',
  title: 'Warning',
  text: 'Please check your input'
});

// Error notification
notify({
  type: 'error',
  title: 'Error',
  text: 'Something went wrong'
});

// Info notification
notify({
  type: 'info',
  title: 'Info',
  text: 'New updates available'
});

Position Control

notify({
  type: 'success',
  text: 'Positioned notification',
  position: 'top-right' // 'top-left', 'bottom-right', 'bottom-left', 'center'
});

Duration Control

// Auto-dismiss after 5 seconds
notify({
  type: 'info',
  text: 'Will disappear in 5 seconds',
  duration: 5000
});

// Permanent notification (click to dismiss)
notify({
  type: 'info',
  text: 'Click to dismiss',
  duration: 0
});

Custom Styling

// Using custom CSS class
notify({
  type: 'success',
  text: 'Custom styled notification',
  classes: 'my-custom-notification'
});

// Custom width
notify({
  type: 'success',
  text: 'Wide notification',
  width: 400
});

CSS Customization

You can override the default styles:

.react-notification {
  /* Base notification styles */
}

.react-notification.success {
  background: #68CD86;
  border-left-color: #42A85F;
}

.react-notification.warn {
  background: #ffb648;
  border-left-color: #f48a06;
}

.react-notification.error {
  background: #E54D42;
  border-left-color: #B82E24;
}

.react-notification.info {
  background: #44A4FC;
  border-left-color: #187FE7;
}

Browser Support

• Chrome
• Firefox
• Safari
• Edge
• IE11 (with appropriate polyfills)

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

MIT © Ömer YALDIRGAN

Support

• Star the repo ⭐️
• Create pull requests
• Follow updates
• Report bugs
• Suggest new features

For detailed examples and documentation, visit our GitHub repository.

Next.js Usage (13+)

When using with Next.js 13 or later, you need to mark your component as a client component by adding the 'use client' directive at the top of your file:

'use client';

import { NotificationProvider } from 'react-notification-pro';

export default function Layout({ children }) {
  return (
    <NotificationProvider>
      {children}
    </NotificationProvider>
  );
}

Also, make sure to wrap the NotificationProvider in a client component:

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

import { NotificationProvider } from 'react-notification-pro';

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

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

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <Providers>{children}</Providers>
      </body>
    </html>
  );
}