React Smooth Notifications

A very smooth, stack-like notification system for React applications.

Installation

npm install @yourname/react-smooth-notifications

Usage

1. Wrap your app with NotificationProvider:

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

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

2. Use the hook in your components:

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

function MyComponent() {
  const { success, error, warning, info } = 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>
    </div>
  );
}

API

• success(message, duration?) - Show success notification
• error(message, duration?) - Show error notification
• warning(message, duration?) - Show warning notification
• info(message, duration?) - Show info notification

Default duration is 3000ms (3 seconds).

Features

• 🎨 Beautiful gradient backgrounds
• 🌊 Smooth animations with cubic-bezier easing
• 📚 Stack-like behavior with scaling effect
• 🎯 Auto-dismiss with customizable duration
• ❌ Manual dismiss by clicking close button
• 🎭 4 notification types: success, error, warning, info
• 📱 Responsive design
• ⚡ Lightweight and performant

Build

npm install
npm run build

Publish to NPM

npm login
npm publish --access public

License

MIT