@syncfusion/ej2-react-notifications

# 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](https://www.syncfusion.com/react-components/react-badge?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm) 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. <a href="https://ej2.syncfusion.com/react/documentation/badge/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Getting Started</a> . <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/badge/default">Online demos</a> . <a href="https://www.syncfusion.com/react-components/react-badge?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Learn more</a> <img alt="React Badge Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-badge.png"> #### Key features * [Types](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/badge/types) - Provided 8 different types of Badges. * [Predefined colors](https://ej2.syncfusion.com/react/documentation/badge/types) - Provided 8 predefined situational colours of Badges. * [Position](https://ej2.syncfusion.com/react/documentation/badge/types#position) - Supports 3 different positions, such as `default`, `top` and `bottom`. ### React Message The [React Message](https://www.syncfusion.com/react-components/react-message?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm) 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. <a href="https://ej2.syncfusion.com/react/documentation/message/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Getting Started</a> . <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/message/default">Online demos</a> . <a href="https://www.syncfusion.com/react-components/react-message?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Learn more</a> <img alt="React Message Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-message.png"> #### Key features * [Severity](https://ej2.syncfusion.com/react/documentation/message/severities) - 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](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/message/variants) - Provides an option to display the message with predefined appearance variants. The available variants such as **Text**, **Outlined**, and **Filled**. * [Visibility](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/message/default) - Provides an option to show or hide the message. * [Template](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/message/template) - Provides an option to customize the content of the message. ### React Toast The [React Toast](https://www.syncfusion.com/react-components/react-toast?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm) 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. <a href="https://ej2.syncfusion.com/react/documentation/toast/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Getting Started</a> . <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/toast/default">Online demos</a> . <a href="https://www.syncfusion.com/react-components/react-toast?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Learn more</a> <img alt="React Toast Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-toast.png"> #### Key features * [Position](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/toast/positions) - 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](https://ej2.syncfusion.com/react/documentation/toast/timeout) - Toast can be expired based on the timeOut property; it hides toast automatically when reaches specific time without user interaction. * [Multi toast](https://ej2.syncfusion.com/react/documentation/toast/position) - Toasts can support to display multiple toasts with various time delay. * [Progress bar](https://ej2.syncfusion.com/react/documentation/toast/config#progress-bar) - Supports to visually indicate time lapse when the toast expires. * [Action buttons](https://ej2.syncfusion.com/react/documentation/toast/action-buttons) - Supports to add buttons in the toast for archiving any actions within the toast. * [Template](https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/toast/templates) - User customized element can be defined for the toast using the template property. ### React Skeleton The [React Skeleton](https://www.syncfusion.com/react-components/react-skeleton?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm) 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. <a href="https://ej2.syncfusion.com/react/documentation/skeleton/getting-started/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Getting Started</a> . <a href="https://ej2.syncfusion.com/react/demos/?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm#/bootstrap5/skeleton/default">Online demos</a> . <a href="https://www.syncfusion.com/react-components/react-skeleton?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm">Learn more</a> <img alt="React Skeleton Component" src="https://raw.githubusercontent.com/SyncfusionExamples/nuget-img/master/react/react-skeleton.gif"> #### Key features * [Shapes](https://ej2.syncfusion.com/react/documentation/skeleton/shapes) - Provides various built-in shape variants to design the layout of the page. * [ShimmerEffect](https://ej2.syncfusion.com/react/documentation/skeleton/shimmer-effect) - Provides an option to display the skeleton with various animation effects. * [Styles](https://ej2.syncfusion.com/react/documentation/skeleton/styles) - Customize the style of a skeleton. Trusted by the world's leading companies <a href="https://getbootstrap.com/"> <img src="https://cdn.syncfusion.com/content/images/home-v1/trusted-by-updated/webp/syncfusion-trusted-companies-v1.webp" alt="Bootstrap logo"> </a> ## Setup To install `notifications` and its dependent packages, use the following command. ```sh npm install @syncfusion/ej2-react-notifications ``` ## Supported frameworks Notification components are also offered in the following list of frameworks. | [<img src="https://ej2.syncfusion.com/github/images/js.svg" height="50" />](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)      [JavaScript](https://www.syncfusion.com/javascript-ui-controls?utm_medium=listing&utm_source=github)     | [<img src="https://ej2.syncfusion.com/github/images/angular-new.svg" height="50" />](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)        [Angular](https://www.syncfusion.com/angular-components/?utm_medium=listing&utm_source=github)       | [<img src="https://ej2.syncfusion.com/github/images/vue.svg" height="50" />](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)        [Vue](https://www.syncfusion.com/vue-ui-components?utm_medium=listing&utm_source=github)          | [<img src="https://ej2.syncfusion.com/github/images/netcore.svg" height="50" />](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   [ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls?utm_medium=listing&utm_source=github)   | [<img src="https://ej2.syncfusion.com/github/images/netmvc.svg" height="50" />](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls?utm_medium=listing&utm_source=github)   | | :-----: | :-----: | :-----: | :-----: | :-----: | ## Showcase samples * Loan Calculator - [Source](https://github.com/syncfusion/ej2-showcase-react-loan-calculator), [Live Demo](https://ej2.syncfusion.com/showcase/react/loancalculator/?utm_source=npm&utm_medium=listing&utm_campaign=react-notfication-npm#/default) ## Support Product support is available through following mediums. * [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support * [Community forum](https://www.syncfusion.com/forums/essential-js2?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm) * [GitHub issues](https://github.com/syncfusion/ej2-react-ui-components/issues/new) * [Request feature or report bug](https://www.syncfusion.com/feedback/react?utm_source=npm&utm_medium=listing&utm_campaign=react-notifications-npm) * Live chat ## Changelog Check the changelog [here](https://github.com/syncfusion/ej2-react-ui-components/blob/master/components/notifications/CHANGELOG.md?utm_source=npm&utm_campaign=notification). 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](https://www.syncfusion.com/eula/es/). To acquire a license for 80+ [React UI components](https://www.syncfusion.com/react-components), you can [purchase](https://www.syncfusion.com/sales/products) or [start a free 30-day trial](https://www.syncfusion.com/account/manage-trials/start-trials). > A free community [license](https://www.syncfusion.com/products/communitylicense) 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](https://github.com/syncfusion/ej2-react-ui-components/blob/master/license?utm_source=npm&utm_campaign=notification) for more info. © Copyright 2025 Syncfusion® Inc. All Rights Reserved. The Syncfusion® Essential Studio® license and copyright applies to this distribution.