DEMO

React Simple Notify

Installation

Install React Notify using npm or yarn:

npm install react-simple-notify
# or
yarn add react-simple-notify

Simple usage

import { notify, NotifyContainers } from 'react-simple-notify';

function App() {
  const showNotification = () => {
    notify.open({
      render: ({ onClose }) => (
        <div>
          This is a notify!
          <button onClick={onClose}>Close</button>
        </div>
      ),
    });
  };

  return (
    <>
      <button onClick={showNotification}>Show Notify</button>
      <NotifyContainers />
    </>
  );
}

export default App;

Notify API

notify.open(options)

Opens a notification with customizable options.

| Parameter | Type | Description | Default Value | |----|--------------------------|--------------------------------------------------------------------------------------------------------|--------------------------| |id|string (optional)|A unique identifier for the notification. If not provided, a random ID will be generated.|Random ID| |duration|number (optional)|The time in milliseconds before the notification automatically closes. Set to 0 for persistent notifications.|3500| |alignment|NotifyAlignment (optional)|The position on the screen where the notification will appear.|NotifyAlignment.bottomLeft| |variant|string (optional)|Allows specifying a variant for custom styling or behavior.|-| |render|Function|A render function that returns the content of the notification. |-|

notify.close(id)

Closes the notification with the specified ID.

| Parameter | Type | Description | |----|-----------------------|--------------------------------------------------------------------------------------------------------| |id|string|The unique identifier of the notification to close.|

notify.closeAll()

Closes all currently open notifications. This function does not take any parameters.

Config API

config.set(props)

Sets the global configuration for notifications.

| Parameter | Type | Description | Default Value | |----|---------------------------------------------|--------------------------------------------------------------------------------------------------------|------------------------------| |alignment| NotifyAlignment (optional) |Global default alignment for notifications.| NotifyAlignment.bottomLeft | |animationConfig| AnimationConfig (optional) |Configuration for the enter and exit animations of notifications.| - | |notifyComponent| React.ComponentType / ReactNode (optional) |A custom React component or element that will wrap the notification content, allowing for custom layouts.| Fragment | |reverse| boolean (optional)|Determines whether notifications stack in reverse order.| false |

config.reset()

Resets the global configuration for notifications to their default values. This function does not take any parameters.

Customizing Notification Container Styles

--rsn-container-padding: Sets the padding around the notification container. Defaults to 10px, allowing you to control the space between the screen's edge and the notifications.

--rsn-container-gap: Defines the gap between individual notifications. The default value is 10px, which you can adjust to manage the spacing between notifications for visual clarity.

example

:root {
    --rsn-container-padding: 15px;
    --rsn-container-gap: 15px;
}

Example of Custom AnimationConfig:

{
  enter: {
    duration: 300,
    easing: "ease-out",
    keyframes: ({ alignment }) => {
      return [
        { opacity: 0, transform: "translateY(-100%)" },
        { opacity: 1, transform: "translateY(0)" }
      ];
    }
  },
  exit: {
    duration: 200,
    easing: "ease-in",
    keyframes: ({ node }) => {
      return [
        { opacity: 1, transform: "scale(1)" },
        { opacity: 0, transform: "scale(0.5)" }
      ];
    }
  }
}