React Notification Library

A simple and customizable React notification component with support for multiple types, icons, animations, and accessibility features.

Features

• Notification Types: Success, Info, Warning, Error.
• Icons: Includes icons for each notification type.
• Animations: Fade, Pop, and Slide animations.
• Accessibility: Supports aria-live and role attributes for better accessibility.

Installation

You can install the package via npm:

npm install toast-camp
yarn add toast-camp

Usage

import React from "react";
import useNotification from "toast-camp";

const App = () => {
  const { showNotification } = useNotification();

  const handleShowNotification = () => {
    showNotification({
      type: "success",
      message: "This is a success notification!",
      animation: "slide",
      onClose: () => console.log("Notification closed"),
    });
  };

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

export default App;

Notification Component

import React, { useEffect, useRef } from "react";
import {
  AiOutlineCheckCircle,
  AiOutlineInfoCircle,
  AiOutlineWarning,
  AiOutlineCloseCircle,
  AiOutlineClose,
} from "react-icons/ai";
import "./Notification.css";
import { NotificationProps } from "./types";

const iconStyles: React.CSSProperties = { marginRight: "10px" };
const icons: Record<string, JSX.Element> = {
  success: <AiOutlineCheckCircle style={iconStyles} />,
  info: <AiOutlineInfoCircle style={iconStyles} />,
  warning: <AiOutlineWarning style={iconStyles} />,
  error: <AiOutlineCloseCircle style={iconStyles} />,
};

const animations: Record<string, string> = {
  fade: "fadeIn",
  pop: "popup",
  slide: "slideIn",
};

const Notification: React.FC<NotificationProps> = ({
  type = "info",
  message,
  onClose,
  animation = "slide",
}) => {
  // A11y
  const notificationRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (notificationRef.current) {
      notificationRef.current.focus();
    }
  }, []);

  const ariaRole = type === "error" || type === "warning" ? "alert" : "status";
  const ariaLive =
    type === "error" || type === "warning" ? "assertive" : "polite";
  // A11y

  return (
    <div
      className={`notification ${type} ${animations[animation]}`}
      // A11y
      role={ariaRole}
      aria-live={ariaLive}
      tabIndex={-1}
      ref={notificationRef}
      // A11y
    >
      {icons[type]} {message}
      <button className="closeBtn" onClick={() => onClose()}>
        <AiOutlineClose color="white" />
      </button>
    </div>
  );
};

export default Notification;

Types

export interface NotificationProps {
  type?: "success" | "info" | "warning" | "error";
  message: string;
  onClose: () => void;
  animation?: "fade" | "pop" | "slide";
}

Customization

• To customize the notification styles, you can override the default CSS classes in Notification.css.

.notification {
  padding: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: white;
  font-size: 16px;
}

.notification.success {
  background-color: #4caf50;
}

.notification.info {
  background-color: #2196f3;
}

.notification.warning {
  background-color: #ff9800;
}

.notification.error {
  background-color: #f44336;
}

.closeBtn {
  background: none;
  border: none;
  cursor: pointer;
}

.fadeIn {
  animation: fadeIn 0.3s ease-in-out;
}

.popup {
  animation: popup 0.3s ease-in-out;
}

.slideIn {
  animation: slideIn 0.3s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes popup {
  from {
    transform: scale(0.8);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

• Tutorial