React Smooth Stack Notifications

A very smooth, stack-like notification system for React applications with custom colors, animations, and stacking behavior.

Installation

npm install @deepnav/react-smooth-notifications

Quick Start

1. Wrap your app with NotificationProvider:

import { NotificationProvider } from '@deepnav/react-smooth-notifications';

function App() {
  return (
    <NotificationProvider>
      {/* Your app */}
    </NotificationProvider>
  );
}

2. Use the hook in your components:

import { useNotification } from '@deepnav/react-smooth-notifications';

function MyComponent() {
  const { success, error, warning, info, alert } = useNotification();

  return (
    <div>
      <button onClick={() => success('Operation completed!')}>
        Success
      </button>
      <button onClick={() => error('Something went wrong!')}>
        Error
      </button>
      <button onClick={() => warning('Be careful!')}>
        Warning
      </button>
      <button onClick={() => info('Here is some info')}>
        Info
      </button>
      <button onClick={() => alert('Important alert!')}>
        Alert
      </button>
    </div>
  );
}

API Reference

useNotification Hook

The useNotification hook provides methods to display notifications:

Basic Methods

• success(message: string, options?) - Show success notification (green)
• error(message: string, options?) - Show error notification (red)
• warning(message: string, options?) - Show warning notification (yellow)
• info(message: string, options?) - Show info notification (blue)
• alert(message: string, options?) - Show alert notification (orange)

Advanced Method

• showNotification(message: string, options) - Show custom notification with full control

Options Object

All notification methods accept an optional options object:

interface NotificationOptions {
  bgColor?: string;      // Background color (hex, rgb, etc.)
  textColor?: string;    // Text color (hex, rgb, etc.)
  type?: 'success' | 'error' | 'warning' | 'info' | 'alert';
  duration?: number;     // Duration in milliseconds (default: 3000)
}

Examples

Basic Usage

const { success, error } = useNotification();

// Simple notification
success('File uploaded successfully!');

// Custom duration (5 seconds)
error('Failed to upload file', { duration: 5000 });

Custom Colors

const { showNotification } = useNotification();

// Custom background and text color
showNotification('Custom notification', {
  bgColor: '#8B5CF6',     // Purple background
  textColor: '#FFFFFF',   // White text
  duration: 4000          // 4 seconds
});

// Using predefined types with custom colors
success('Success!', {
  bgColor: '#10B981',     // Custom green
  textColor: '#FFFFFF'
});

Complete Custom Notification

const { showNotification } = useNotification();

showNotification('Processing your request...', {
  type: 'info',
  bgColor: '#3B82F6',
  textColor: '#FFFFFF',
  duration: 5000
});

Default Colors

Each notification type has default colors:

• Success: Green gradient (#10B981 to #059669)
• Error: Red gradient (#EF4444 to #DC2626)
• Warning: Yellow gradient (#F59E0B to #D97706)
• Info: Blue gradient (#3B82F6 to #2563EB)
• Alert: Orange gradient (#F97316 to #EA580C)

Features

• 🎨 Custom Colors - Full control over background and text colors
• 🌊 Smooth Animations - Buttery smooth slide-up animations
• 📚 Stack Behavior - Notifications stack with width scaling (max 3 visible)
• 🎯 Auto-dismiss - Customizable duration for each notification
• ❌ Manual Dismiss - Click the × button to close
• 🎭 5 Notification Types - success, error, warning, info, alert
• 🖼️ Width Scaling - Older notifications appear narrower behind newer ones
• 📱 Responsive Design - Works on all screen sizes
• ⚡ Lightweight - Minimal bundle size with Framer Motion
• 🎪 Hover Effect - Notifications expand on hover

Behavior

• Maximum 3 notifications displayed at once
• Newest on top - Latest notifications appear above older ones
• Stack effect - Each older notification is progressively narrower (6% width reduction)
• Bottom-right position - Notifications slide up from the bottom-right corner
• Auto-remove - Oldest notification is removed when limit is reached

TypeScript Support

Fully typed with TypeScript definitions included.

Build

npm install
npm run build

Publish to NPM

npm login
npm publish --access public

Repository

https://github.com/deepnav/react-smooth-notifications

License

MIT