🔔 Zing Notification

Zing is a lightweight and customizable notification system for React, designed with simplicity and flexibility in mind.
It's built using TypeScript, Framer Motion, and supports custom themes, positions, and queueing logic.

🚀 Features

• ✅ Easy-to-use useZing() hook
• 🎨 Custom themes for success, error, warning, and info
• 📌 Position control: top-right, bottom-center, etc.
• ⏱ Auto-dismiss notifications after timeout
• ⏳ Queue system for stacked notifications
• ⚡️ Built with Framer Motion for smooth animations

📦 Installation

npm install zing-notification
# or
yarn add zing-notification


import React from 'react';
import { ZingProvider, useZing } from 'zing-notification';

## 🧠 Basic Usage

function App() {
  return (
    <ZingProvider position="top-right">
      <Home />
    </ZingProvider>
  );
}

function Home() {
  const { showZing } = useZing();

  return (
    <button onClick={() => showZing('This is a success message!', 'success')}>
      Show Notification
    </button>
  );
}

## 🎨 Custom Theme

const myTheme = {
  success: {
    background: '#198754',
    color: '#fff',
    icon: '✅',
    fontSize: '16px',
    borderRadius: '12px',
    padding: '14px 20px',
  },
  error: {
    background: '#dc3545',
    icon: '❌',
  },
};

<ZingProvider position="bottom-left" theme={myTheme}>
  <App />
</ZingProvider>

## 🧩 Hook: useZing()

const { showZing } = useZing();


## Usage

showZing("Your message", "success");


## 🧾 Types

type ZingType = 'success' | 'error' | 'info' | 'warning';

type ZingPosition =
  | 'top-left'
  | 'top-right'
  | 'bottom-left'
  | 'bottom-right'
  | 'top-center'
  | 'bottom-center';

interface ZingThemeItem {
  background: string;
  color?: string;
  icon?: string;
  fontSize?: string;
  borderRadius?: string;
  padding?: string;
}

interface ZingTheme {
  success?: ZingThemeItem;
  error?: ZingThemeItem;
  info?: ZingThemeItem;
  warning?: ZingThemeItem;
}


## 🛠 Built With

React
TypeScript
FramerMotion
uuid

## ✅ Coming Soon
Support for multiple durations

Optional progress bar

Dark/light mode support

Accessibility (ARIA roles)

## 🤝 License
This project is licensed under the MIT License.

## 💬 Contributing

Pull requests are welcome!
For major changes, please open an issue first to discuss what you would like to change.

## 🧑‍💻 Author
Made with ❤️ by Kamyar Jafari
GitHub: https://github.com/kamyar021021/