jdhrnndz / react-notifications-component

Highly configurable and easy to use React Component to notify your users!

react-notifications-component

Highly configurable and easy to use React Component to notify your users!

Demo

https://teodosii.github.io/react-notifications-component/

Features

• Touch support
• Responsive notifications
• Predefined standard notification types (default, success, info, danger, warning)
• Custom notification types
• Custom notification content (images, icons etc)
• Dismiss after number of seconds
• Dismissable by swiping
• Dismissable by clicking
• Dismissable by custom X icon
• Custom animations on show
• Custom animations on exit
• Custom transitions on sliding
• Custom transitions on swiping
• Top/bottom notification insertion

Install

npm install react-notifications-component

Usage

You must place ReactNotificationsComponent component at the root level of the application in order to work properly, otherwise it might conflict with other DOM elements due to the positioning.

Use ref arrow syntax when declaring ReactNotificationsComponent in order to have access to internal method addNotification. All API methods provided must be called like this.

For further information on supported options, check documentation.

import React from "react";
import ReactNotification from "react-notifications-component";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.addNotification = this.addNotification.bind(this);
  }

  addNotification() {
    this.notificationDOMRef.addNotification({
      title: "Awesomeness",
      message: "Awesome Notifications!",
      type: "success",
      insert: "top",
      container: "top-right",
      animationIn: ["animated", "fadeIn"],
      animationOut: ["animated", "fadeOut"],
      dismiss: { duration: 2000 },
      dismissable: { click: true }
    });
  }

  render() {
    return (
      <div className="app-content">
        <ReactNotification ref={input => this.notificationDOMRef = input} />
        <button onClick={this.addNotification} className="btn btn-primary">
          Add Awesome Notification
        </button>
      </div>
    );
  }
}

Note: It is important to import react-notifications-component CSS theme, which is located in dist\theme.css

Development

npm run build:library
npm run start

Test

npm run test

API

addNotification(options)

Render a new notification. Method returns a unique ID representing the rendered notification. Supplied options are internally validated and an exception will be thrown if validation fails.

removeNotification(id)

Manually remove a notification by ID. Nothing will happen if notification does not exist.

Options

Name	Type	Description
title	String	Title of the notification. Option is ignored if content is set
message	String	Message of the notification. Option is ignored if content is set, otherwise it is required
content	React.Component	Custom notification content, must be a valid React component
type	String	Type of the notification (success, danger, default, info, warning or custom). Option is ignored if content is set, otherwise it is required
container	String	Container in which the notification will be displayed (top-left, top-right, bottom-left, bottom-right). Option is required
insert	String	Insert notification at the top or at the bottom of the container. Option defaults to top
userDefinedTypes	Array	Define allowed types when rendering custom types htmlClasses - Array - CSS classes to be applied to the notification element name - String - name of the custom type
dismissable	Object	Specify how a notification should be manually dismissed click - Boolean - dismiss by clicking (option defaults to true) touch - Boolean - dismiss by swiping on mobile devices (option defaults to true)
dismissIcon	Object	Custom X icon className - Array - CSS classes to be applied to icon's parent content - React.Component - must be a valid React component
animationIn	Array	CSS classes used to animate notification on show
animationOut	Array	CSS classes used to animate notification on removal
slidingEnter	Object	Transition to be used when sliding to show a notification duration - Number (ms) cubicBezier - Number (ms) delay - Number (ms)
slidingExit	Object	Transition to be used when sliding to hide a notification duration - Number (ms) cubicBezier - Number (ms) delay - Number (ms)
touchSlidingBack	Object	Transition to be used when sliding back after an incomplete swipe duration - Number (ms) cubicBezier - Number (ms) delay - Number (ms)
touchSlidingExit	Object	Transition to be used when sliding on swipe duration - Number (ms) cubicBezier - Number (ms) delay - Number (ms)
dismiss	Object	Automatically dismiss a notification after specified timeout duration - Number (ms - 0 means Infinite)
width	Number	Overwrite notification's width defined by stylesheets

Roadmap

• Improve tests for better coverage (up to 100%)
• Containers for other positions (top-center, bottom-center, center or even custom)
• Move react-notifications-component theme to a separate npm package
• Events support (onShow, onRemoved, onClicked, onTimeoutDismissed etc)
• Show time left (progress-bar like)
• Modal notification

Note: Some of the above mentioned are only ideas for now and may not be implemented