npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@syncfusion/ej2-react-notifications

v27.2.2

Published

A package of Essential JS 2 notification components such as Toast and Badge which used to notify important information to end-users. for React

Downloads

11,280

Readme

React Notifications Components

What's Included in the React Notification Package

The React Notification package includes the following list of components.

React Badge

The React Badge component is a pure CSS control used to add notifications, messages, or statuses in different shapes and sizes. The Badge control can be easily integrated with ListView, Avatar, and other container controls.

Key features

  • Types - Provided 8 different types of Badges.
  • Predefined colors - Provided 8 predefined situational colours of Badges.
  • Position - Supports 3 different positions, such as default, top and bottom.

React Message

The React Message component is a graphical user interface for displaying messages with visual severity levels. It differentiates messages with icons and colors to denote the importance and context of the message.

Key features

  • Severity - Provides an option to display the message with distinctive icons and colors based on the severity type. The available severity types such as Normal, Success, Info, Warning, and Error.
  • Variants - Provides an option to display the message with predefined appearance variants. The available variants such as Text, Outlined, and Filled.
  • Visibility - Provides an option to show or hide the message.
  • Template - Provides an option to customize the content of the message.

React Toast

The React Toast component is a small, non-blocking notification pop-up. It is a readable message displayed at the bottom of the screen or at a specific target and disappears automatically after a few seconds (time out) with different animation effects.

Key features

  • Position - Enables to position the toast anywhere on the screen. It has a predefined set of positions and custom inputs for position based on the target.
  • Autohide and Timeout - Toast can be expired based on the timeOut property; it hides toast automatically when reaches specific time without user interaction.
  • Multi toast - Toasts can support to display multiple toasts with various time delay.
  • Progress bar - Supports to visually indicate time lapse when the toast expires.
  • Action buttons - Supports to add buttons in the toast for archiving any actions within the toast.
  • Template - User customized element can be defined for the toast using the template property.

React Skeleton

The React Skeleton component is a placeholder that animates a shimmer effect to let users know that the page’s content is currently loading. It has several built-in features such as support for shapes, shimmer effect, and UI customization.

Key features

  • Shapes - Provides various built-in shape variants to design the layout of the page.
  • ShimmerEffect - Provides an option to display the skeleton with various animation effects.
  • Styles - Customize the style of a skeleton.

Setup

To install notifications and its dependent packages, use the following command.

npm install @syncfusion/ej2-react-notifications

Supported frameworks

Notification components are also offered in the following list of frameworks.

|      JavaScript     |        Angular       |        Vue          |   ASP.NET Core   |   ASP.NET MVC   | | :-----: | :-----: | :-----: | :-----: | :-----: |

Showcase samples

Support

Product support is available through following mediums.

Changelog

Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.

License and copyright

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for 80+ React UI components, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICNESE FILE for more info.

© Copyright 2024 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.