1.0.4 • Published 7 months ago

react-custom-toast-notifications v1.0.4

Weekly downloads
-
License
ISC
Repository
-
Last release
7 months ago

React Custom Toast Notifications

A highly customizable toast notification system for React applications with smooth animations and extensive styling options.

Features ✨

  • 🎨 Highly Customizable - Extensive styling options with Tailwind CSS support
  • 🚀 Smooth Animations - Polished entrance and exit animations
  • 🔧 TypeScript Support - Built with TypeScript for better developer experience
  • 📱 Responsive - Works seamlessly across all device sizes
  • 🎯 Multiple Positions - 6 different toast positions
  • Lightweight - Minimal bundle size with zero dependencies
  • 🎪 Toast Types - Success, Error, Warning, and Info variants

Installation 📦

npm install react-custom-toast-notifications
# or
yarn add react-custom-toast-notifications
# or
pnpm add react-custom-toast-notifications

Basic Usage 🚀

  1. Wrap your app with ToastProvider:
import { ToastProvider } from 'react-custom-toast-notifications';

function App() {
  return (
    <ToastProvider position="top-right">
      <YourApp />
    </ToastProvider>
  );
}
  1. Use the useToast hook in your components:
import { useToast } from 'react-custom-toast-notifications';

function MyComponent() {
  const { addToast } = useToast();
  
  const showNotification = () => {
    addToast('Operation successful!', {
      type: 'success',
      duration: 5000
    });
  };
  
  return <button onClick={showNotification}>Show Toast</button>;
}

Customization Options ⚙️

Position Options

  • top-right (default)
  • top-left
  • top-center
  • bottom-right
  • bottom-left
  • bottom-center

Toast Types

  • success - For successful operations
  • error - For error messages
  • info - For informational messages
  • warning - For warning alerts

Configuration Interface

interface ToastOptions {
  type?: 'success' | 'error' | 'info' | 'warning';
  duration?: number;
  showIcon?: boolean;
  showCloseButton?: boolean;
  className?: string;
  icon?: React.ComponentType;
  animation?: {
    enter?: string;
    exit?: string;
    duration?: number;
  };
  onClose?: () => void;
  onClick?: () => void;
}

interface ToastProviderProps {
  position?: Position;
  containerClassName?: string;
  maxToasts?: number;
  defaultDuration?: number;
  containerStyle?: React.CSSProperties;
  pauseOnHover?: boolean;
  closeOnClick?: boolean;
}

Advanced Usage 🔧

Custom Styling

// Using Tailwind classes
<ToastProvider
  position="top-right"
  containerClassName="space-y-2 p-4"
>
  <YourApp />
</ToastProvider>

// Custom toast styling
addToast('Custom styled toast!', {
  className: 'bg-purple-500 text-white font-bold rounded-xl',
  showIcon: true,
  duration: 3000
});

Custom Icons

import { CustomIcon } from './icons';

addToast('Message with custom icon', {
  icon: CustomIcon,
  type: 'info'
});

Promise Integration

const { promiseToast } = useToast();

const handleAsyncOperation = async () => {
  await promiseToast(
    asyncOperation(),
    {
      loading: 'Processing...',
      success: 'Operation completed!',
      error: (err) => `Error: ${err.message}`
    }
  );
};

Animation Customization

<ToastProvider
  position="top-right"
  animation={{
    enter: 'slide-in',
    exit: 'fade-out',
    duration: 300
  }}
>
  <YourApp />
</ToastProvider>

Examples 📚

Basic Success Toast

addToast('Successfully saved!', { type: 'success' });

Error Toast with Custom Duration

addToast('Operation failed!', {
  type: 'error',
  duration: 8000,
  showCloseButton: true
});

Info Toast with Custom Icon and Styling

addToast('New update available!', {
  type: 'info',
  icon: UpdateIcon,
  className: 'bg-blue-100 border-l-4 border-blue-500'
});

Browser Support 🌐

  • Chrome >= 60
  • Firefox >= 60
  • Safari >= 12
  • Edge >= 79

Contributing 🤝

Contributions are always welcome! Please follow these steps:

  1. Fork the repository
  2. Create your feature branch (git checkout -b feature/amazing-feature)
  3. Commit your changes (git commit -m 'Add some amazing feature')
  4. Push to the branch (git push origin feature/amazing-feature)
  5. Open a Pull Request

License 📄

This project is licensed under the MIT License

Support 💬

Credits 🙏

Developed and maintained by malicious-dev

Changelog 📝

See CHANGELOG.md for details.

1.0.4

7 months ago

1.0.2

7 months ago

1.0.1

7 months ago

1.0.0

7 months ago