Sky Alert

A lightweight and customizable React notification library with animated borders, modern icons, and automatic dismissal.

Created by Sandeep Kr. Yadav

Features

• Simple toast notification API
• Four notification types: success, error, warning, and info
• One-time container setup
• Automatic dismissal
• Close button support
• Custom notification title and duration
• Animated notification design
• React 18+ support

Installation

Install the package using npm:

npm install sky-alert

Setup

Add SkyContainer and the CSS import once in your application's main entry file.

main.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { SkyContainer } from "sky-alert";
import "sky-alert/style.css";

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
    <SkyContainer />
  </React.StrictMode>
);

Basic Usage

Import sky into any component where you want to show a notification.

import { sky } from "sky-alert";

function App() {
  const handleSuccess = () => {
    sky.success("Your data has been saved successfully!");
  };

  return (
    <button onClick={handleSuccess}>
      Show Success
    </button>
  );
}

export default App;

Notification Types

Success

sky.success("Email sent successfully!");

Error

sky.error("Something went wrong!");

Warning

sky.warning("Please check your input!");

Info

sky.info("Your profile has been updated.");

Custom Title and Duration

You can customize the notification title and duration.

sky.success("Welcome to our application!", {
  title: "Welcome Sandeep",
  duration: 5000,
});

The duration is specified in milliseconds. The default duration is 3000 milliseconds (3 seconds).

To keep a notification visible until it is manually closed, set duration to 0.

sky.info("This notification will stay visible.", {
  title: "Important Information",
  duration: 0,
});

Dismiss Notifications

Dismiss a specific notification by its ID:

const notificationId = sky.success("Saved successfully!");

sky.dismiss(notificationId);

Dismiss all active notifications:

sky.dismiss();

Available Methods

| Method | Description | | --- | --- | | sky.success(message, options) | Shows a success notification | | sky.error(message, options) | Shows an error notification | | sky.warning(message, options) | Shows a warning notification | | sky.info(message, options) | Shows an information notification | | sky.dismiss(id) | Dismisses a notification by ID | | sky.dismiss() | Dismisses all notifications |

Using the SkyAlert Component Directly

You can also use the alert component directly when you want to control its visibility yourself.

import { SkyAlert } from "sky-alert";
import "sky-alert/style.css";

function Example() {
  return (
    <SkyAlert
      type="success"
      title="Success"
      message="Your operation completed successfully."
      onClose={() => console.log("Alert closed")}
    />
  );
}

export default Example;

Requirements

• React 18 or later
• React DOM 18 or later

Author

Sandeep Kr. Yadav

License

MIT