react-smart-notification-toaster v1.0.0

React Smart Notification Toaster

A highly customizable React component for displaying customizable notifications with progress bars.

✨ Features

• ✅ Customizable notification message, description, button, every style of the notification window
• ✅ Supports progress bar with auto-close
• ✅ Allows manual close option
• ✅ Fully stylable with CSS
• ✅ Works seamlessly with React 17+
• ✅ Minimal dependencies

📦 Installation

Install via NPM:

npm install react-smart-notification-toaster

or via Yarn:

yarn add react-smart-notification-toaster

🚀 Usage

Import SmartNotification into your React component:

import React, { useState } from "react";
import SmartNotification from "smart-notification";

const App = () => {
  const [showNotification, setShowNotification] = useState(false);

  const notificationSettings = {
    notify_text: "Custom code is not validated.",
    notify_desc: [
      {
        desc: true,
        text: "Incorrect code may impact your website's performance",
      },
    ],
    redirect_url: { redirect: false, url: "#", text: "Maybe later" },
    notify_icon: { icon: false, color: "#E2E1E7", type: null },
    notify_close: { close_n: true, color: "#84869f" },
    notify_color: {
      background: "#f7f7f9",
      text: "#3a393e",
      border: {
        type: true,
        color: "5px solid #c5c4cc",
      },
    },
    progress_bar: {
      type: false,
      background: "#ff0000",
    },
    notify_duration: 3000,
  };

  const handleClick = () => {
    setShowNotification(true);

    const duration = notificationSettings.notify_duration ?? 3000;

    setTimeout(() => {
      setShowNotification(false);
    }, duration);
  };

  return (
    <div>
      <button onClick={handleClick}>Show Notification</button>
      {showNotification && <SmartNotification {...notificationSettings} />}
    </div>
  );
};

export default App;

🛠 Props

🎨 Styling

You can customize styles by overriding SmartNotification.css:

.smart-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  background-color: white;
  border-radius: 8px;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
}
.notification {
  padding: 15px;
}
.progress-bar {
  height: 5px;
  transition: width 0.3s ease-in-out;
}

🔧 Development

Clone the repository and install dependencies:

git clone https://github.com/chonchol/react-notification-bar.git
cd react-notification-bar
npm install

Build the package:

npm run build

Run the example:

npm start

📜 License

This project is licensed under the MIT License.

Author

Developed by Chonchol Mahmud. Feel free to contribute or report issues!

💬 Need Help?

If you encounter any issues, please create an Issue on GitHub.

🚀 Happy Coding! 🚀