G-Notification

A flexible and customizable React notification/toast component with TypeScript support.

🌐 Live Demo & Documentation

Visit our interactive demo website →

Try out different notification types, customizations, and see the component in action with real examples!

✨ Features

• 🎨 Multiple Types: Success, danger, warning, info, and custom types
• ⚡ Highly Customizable: Fully customizable styles, animations, and behavior
• 🎯 TypeScript First: Full TypeScript support with comprehensive type definitions
• 📱 Responsive Design: Works perfectly on all screen sizes and devices
• 🎭 Custom Animations: Support for custom CSS animations and keyframes
• ⏱️ Smart Progress Bar: Optional progress bar for auto-dismiss notifications
• 🔗 Interactive: Support for click and long-press actions with custom handlers
• 🎛️ Flexible Positioning: Multiple position options (top-right, top-left, bottom-right, bottom-left)
• 📋 Queue Management: Automatic queue system for handling multiple notifications
• 🚀 Lightweight: Minimal bundle size with zero external dependencies
• 🎨 Modern UI: Clean, modern design that fits any application

📦 Installation

npm install g-notification
# or
yarn add g-notification
# or
pnpm add g-notification

🚀 Quick Start

import React from 'react';
import { GNotificationProvider, useGNotification } from 'g-notification';

function App() {
  return (
    <GNotificationProvider>
      <MyComponent />
    </GNotificationProvider>
  );
}

function MyComponent() {
  const { g_toast } = useGNotification();

  const showNotification = () => {
    g_toast({
      title: "Success!",
      content: "Your action was completed successfully.",
      type: "success",
      duration: 3000
    });
  };

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

💡 Pro Tip: Check out our interactive demo to see all features in action!

📚 API Reference

GNotificationProvider Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | children | ReactNode | - | React children | | position | "top-right" \| "top-left" \| "bottom-right" \| "bottom-left" | "top-right" | Position of notifications | | maxVisibleNotification | number | 4 | Maximum number of visible notifications | | zIndex | number | 9999 | Z-index of notification container | | progressBar | boolean | false | Show progress bar for auto-dismiss notifications |

Toast Options

| Option | Type | Default | Description | |--------|------|---------|-------------| | content | string | - | Required. Notification content | | title | string | - | Optional title | | icon | ReactNode | - | Optional icon | | type | "success" \| "danger" \| "warning" \| "info" \| "custom" | - | Notification type | | duration | number | 3000 | Auto-dismiss duration in milliseconds | | style | CSSProperties | - | Custom styles (for custom type) | | cssAnimation | object | - | Custom CSS animation | | closeButton | boolean | false | Show close button | | closeButtonContent | ReactNode | "×" | Custom close button content | | onClick | () => void | - | Click handler | | onPress | () => void | - | Long-press handler (400ms) | | link | string | - | URL to open on click | | persistent | boolean | false | Don't auto-dismiss | | customRender | (props: { close: () => void }) => ReactNode | - | Custom render function |

🎯 Examples

🎨 Want to see more examples? Visit our demo website for interactive examples!

Basic Usage

const { g_toast } = useGNotification();

// Success notification
g_toast({
  title: "Success!",
  content: "Operation completed successfully.",
  type: "success"
});

// Error notification
g_toast({
  title: "Error!",
  content: "Something went wrong.",
  type: "danger",
  duration: 5000
});

// Warning notification
g_toast({
  content: "Please check your input.",
  type: "warning"
});

// Info notification
g_toast({
  title: "Info",
  content: "This is an informational message.",
  type: "info"
});

Custom Styling

g_toast({
  content: "Custom styled notification",
  type: "custom",
  style: {
    background: "linear-gradient(45deg, #ff6b6b, #4ecdc4)",
    color: "white",
    border: "2px solid #333"
  }
});

Custom Animation

g_toast({
  content: "Animated notification",
  cssAnimation: {
    animationName: "slideIn",
    animationDuration: "0.5s",
    keyframes: `
      0% { transform: translateX(100%); opacity: 0; }
      100% { transform: translateX(0); opacity: 1; }
    `
  }
});

Clickable Notifications

g_toast({
  content: "Click me!",
  onClick: () => {
    console.log("Notification clicked!");
  },
  link: "https://example.com" // Opens in new tab
});

Long Press Support

g_toast({
  content: "Long press me!",
  onPress: () => {
    console.log("Notification long pressed!");
  }
});

Custom Render

g_toast({
  customRender: ({ close }) => (
    <div style={{ padding: "20px", background: "#f0f0f0" }}>
      <h3>Custom Content</h3>
      <p>This is completely custom rendered content.</p>
      <button onClick={close}>Close</button>
    </div>
  )
});

Persistent Notifications

g_toast({
  content: "This notification won't auto-dismiss",
  persistent: true,
  closeButton: true
});

⚙️ Advanced Configuration

Custom Provider Setup

<GNotificationProvider
  position="bottom-left"
  maxVisibleNotification={6}
  zIndex={10000}
  progressBar={true}
>
  <App />
</GNotificationProvider>

🔷 TypeScript

The package includes full TypeScript support. All types are exported:

import { GNotificationProvider, useGNotification, Toast } from 'g-notification';

// Toast type for custom implementations
const customToast: Toast = {
  id: 1,
  content: "Custom toast",
  type: "custom"
};

🤝 Contributing

We welcome contributions! Here's how you can help:

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

🐛 Found a Bug?

Please report bugs on our GitHub Issues page.

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

💬 Support

• 🌐 Live Demo: https://gnotification.gurkayc.com/
• 📧 Issues: GitHub Issues
• 📖 Documentation: Check out our comprehensive examples and API docs