g-notification/README.md

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

# G-Notification

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

## 🌐 Live Demo & Documentation

**[Visit our interactive demo website →](https://gnotification.gurkayc.com/)**

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

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

## 🚀 Quick Start

```tsx
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](https://gnotification.gurkayc.com/) 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](https://gnotification.gurkayc.com/) for interactive examples!

### Basic Usage

```tsx
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

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

### Custom Animation

```tsx
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

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

### Long Press Support

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

### Custom Render

```tsx
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

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

## ⚙️ Advanced Configuration

### Custom Provider Setup

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

## 🔷 TypeScript

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

```tsx
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](https://github.com/Gurkayx/g-notification/issues) page.

## 📄 License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.

## 💬 Support

- 🌐 **Live Demo**: [https://gnotification.gurkayc.com/](https://gnotification.gurkayc.com/)
- 📧 **Issues**: [GitHub Issues](https://github.com/Gurkayx/g-notification/issues)
- 📖 **Documentation**: Check out our comprehensive examples and API docs

---

<div align="center">
  <p>Made with ❤️ by the G-Notification team</p>
  <p>
    <a href="https://gnotification.gurkayc.com/">🌐 Demo</a> •
    <a href="https://github.com/Gurkayx/g-notification">📦 GitHub</a> •
    <a href="https://www.npmjs.com/package/g-notification">📦 NPM</a>
  </p>
</div>