Delightful and highly customisable React Component to notify your users

Overview

npm version npm Minified & Gzipped size

react-notifications-component

A delightful, easy to use and highly configurable component to help you notify your users out of the box. No messy setup, just beautiful notifications!

🔥 🔥 🔥 Interested in an animation library for React? I just launched react-tweenful, check it out here https://github.com/teodosii/react-tweenful

Demo

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

alt text

Features

  • Touch support
  • Responsive notifications
  • Standard notification types
  • Custom notification types
  • Custom notification content
  • Dismissable (touch, click, timeout)
  • Customizable transitions
  • Small library

Getting started

npm install react-notifications-component

Development

First build the library

npm run build:library:dev

then run the webpack server to see the app running

npm run start

Usage

Import react-notifications-component

import ReactNotification from 'react-notifications-component'

Import the CSS theme

import 'react-notifications-component/dist/theme.css'
SASS

SASS files are located in react-notifications-component/dist/scss

Render react-notifications-component at the top of your application so that it does not conflict with other absolutely positioned DOM elements.

const App = () => {
  return (
    <div className="app-container">
      <ReactNotification />
      <Application />
    </div>
  )
};

Import store where needed - will be used to access addNotification and removeNotification API methods

import { store } from 'react-notifications-component';

Then call addNotification and watch the magic happens

store.addNotification({
  title: "Wonderful!",
  message: "[email protected]",
  type: "success",
  insert: "top",
  container: "top-right",
  animationIn: ["animate__animated", "animate__fadeIn"],
  animationOut: ["animate__animated", "animate__fadeOut"],
  dismiss: {
    duration: 5000,
    onScreen: true
  }
});

Voila!

Note: We rely on animate.css in this example as animate__fadeIn and animate__fadeOut are part of animate.css. We recommend using it as it's an excellent animation library, but you're not forced to. If you prefer you may also use your custom animations as long as they're valid CSS animations.

Note: animate.css latest version (v4) has breaking changes. It introduces animate__ prefix so that existing classes don't clash. If you still would like to use classes without prefix you can import animate.css/animate.compat.css

// preferred way to import (from `v4`). Uses `animate__` prefix.
import 'animate.css/animate.min.css';

// Alternate way to use classes without prefix like `animated fadeIn`
import 'animate.css/animate.compat.css'

In the examples, we will be using classes with animate__ prefix, which is the default behaviour of latest v4 version of animate.css.

For more info on how to use animate.css, please refer to animate.css docs

API

store.addNotification(options)

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

store.removeNotification(id)

Manually remove a notification by id.

Examples

In the following examples for brevity some options will not be mentioned. Strictly focusing on the needed options to present each example. For reference, we will be using Object spread operator on a notification object to have non relevant fields included as well.

notification = {
  title: "Wonderful!",
  message: "Configurable",
  type: "success",
  insert: "top",
  container: "top-right",
  animationIn: ["animate__animated animate__fadeIn"], // `animate.css v4` classes
  animationOut: ["animate__animated animate__fadeOut"] // `animate.css v4` classes
};

Notification container

You have in total 6 containers for desktop and 2 for mobile, if component is set to be responsive. List of containers:

  • top-left
  • top-right
  • top-center
  • center
  • bottom-left
  • bottom-right
  • bottom-center
store.addNotification({
  ...notification,
  container: 'top-right'
})

Will position the notification in top right of the screen.

Notification type

List of types:

  • success
  • danger
  • info
  • default
  • warning
store.addNotification({
  ...notification,
  type: 'danger'
})

Will trigger a danger notification.

Animating

store.addNotification({
  ...notification, 
  animationIn: ['animate__animated animate__fadeIn'], // `animate.css v4` classes
  animationOut: ['animate__animated animate__fadeOut'] // `animate.css v4` classes
})

animationIn and animationOut rely on CSS classes that toggle animations. On github pages we rely on animate.css, we suggest you to import that package and use their animations as they have plenty.

Note: Failing to have animations set properly will lead to bugs in some causes, as react-notifications-component relies on onAnimationEnd event to know when an animation has finished.

Dismiss notification automatically after timeout expires

store.addNotification({
  ...notification,
  dismiss: {
    duration: 2000
  }
})

Dismiss notification automatically with the time left shown on UI

store.addNotification({
  ...notification,
  dismiss: {
    duration: 2000,
    onScreen: true
  }
})

Subscribe to notification's removal

Easily subscribe to onRemoval by supplying callback as option to the notification object. Callback will get called after the removal animation finishes.

store.addNotification({
  ...notification,
  onRemoval: (id, removedBy) => {
    ...
  }
})

Pause notification's timeout by hovering

store.addNotification({
  ...notification,
  dismiss: {
    duration: 2000,
    pauseOnHover: true
  }
})

Change transition

store.addNotification({
  ...notification,
  slidingExit: {
    duration: 800,
    timingFunction: 'ease-out',
    delay: 0
  }
})

slidingEnter, touchRevert and touchSlidingExit can all be configured in the same way, with the mention that touchSlidingExit has 2 transitions nested.

store.addNotification({
  ...notification,
  touchSlidingExit: {
    swipe: {
      duration: 400,
      timingFunction: 'ease-out',
      delay: 0,
    },
    fade: {
      duration: 400,
      timingFunction: 'ease-out',
      delay: 0
    }
  }
})

Props

Name Type Description
isMobile Boolean Set whether you want component to be responsive or not. To be used together with breakpoint
breakpoint Number Breakpoint for responsiveness - defaults to 768px
types Array Custom types
className string Classes assigned to the container
id string Id of the container

Options

Name Type Description
id String Id of the notification. Supply option only if you prefer to have custom id, otherwise you should let the component handle generation for you.
onRemoval Function Gets called on notification removal with id and removedBy arguments
title String, React Node or Functional Component Title of the notification. Option is ignored if content is set, otherwise it is required.
message String, React Node or Functional Component Message of the notification. Option is ignored if content is set, otherwise it is required.
content Object Custom notification content, must be either Class Component, Functional Component or React element. If being supplied as functional or class component, id will be supplied as prop
type String Type of the notification. Option is ignored if content is set, otherwise it is required.
container String Container in which the notification will be displayed. Option is required.
insert String Specify where to append notification into the container - top or bottom. Option defaults to top.
dismiss Dismiss Specify how a notification should be dismissed.
animationIn Array Array of CSS classes for animating the notification's entrance.
animationOut Array Array of CSS classes for animating the notification's exit.
slidingEnter Transition Transition to be used when sliding to show a notification.
slidingExit Transition Transition to be used when sliding to remove a notification.
touchRevert Transition Transition to be used when sliding back after an incomplete swipe.
touchSlidingExit Transition Transition to be used when sliding on swipe.
width Number Overwrite notification's width defined by CSS

Transition

Transition is used each time you define a transition.

Name Type Description
duration Number Transition duration in ms. Its default value ranges from 300 to 600, depending on transition
timingFunction String CSS timing function for the transition, defaults to linear
delay Number Delay of the transition in ms, defaults to 0

Dismiss

Dismiss is used to describe how a notification should be dismissed.

Name Type Description
duration Number Time in milliseconds after notification gets dismissed. 0 will act as infinite duration. Defaults to 0
onScreen Boolean Show time left directly on the notification. Defaults to false
pauseOnHover Boolean Hovering over notification will pause the dismiss timer. Defaults to false
waitForAnimation Boolean When removing a notification by default we trigger the exit animation and the transition to height 0 at the same time. Setting this to true will wait for the exit animation to finish and then start the transition to height 0. Defaults to false
click Boolean Enable dismissal by click, defaults to true
touch Boolean Enable dismiss by touch move, defaults to true
showIcon Boolean Show or hide the close icon, defaults to false. If set to true, it will respond to click interaction and will remove notification

Migration from v1

  • Ref usage has been deprecated. Import store from library and use it for adding and removing notifications
  • touchSlidingBack has been renamed to touchRevert
  • Default values for transitions have been slightly changed
  • dismissIcon has been removed. Use showIcon instead. If you relly on customized close icon, then stick to custom content.
  • dismiss supports now more options
  • cubicBezier has been renamed to timingFunction
  • Validators are now no longer included in the prod build, they are only included in the dev build. If you inspect the npm package you will see that the component has 2 builds - dev and prod - and relies on ENV variable when importing.

License

MIT

Comments
  • Cannot install it on React 17.0.1

    Cannot install it on React 17.0.1

    npm install react-notifications-component
    

    npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: [email protected] npm ERR! Found: [email protected] npm ERR! node_modules/react npm ERR! [email protected]"^17.0.1" from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer [email protected]"^16.0.0" from [email protected] npm ERR! node_modules/react-notifications-component npm ERR! [email protected]"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.

    opened by mjza 12
  • Notification stuck at the bottom if it pops up when the window is not visible.

    Notification stuck at the bottom if it pops up when the window is not visible.

    If you get a notification in your web app, and the tab of the app is not visible or active during the time it appeared... when you return into your app, the notification will appear stuck at the bottom of the screen.

    Steps to reproduce:

    1. Paste the code below somewhere in your startup function.
    2. Start your app and ensure the page of your app is not visible, by either having the window minimised or on a different tab.
    3. When sufficient time has elapsed (15 seconds or so), maximise your app again.
    4. Notice that the notification that popped up is still present, however it's mostly cut off from view and wont disappear.
                     setTimeout( ()=>{
    			store.addNotification({
    				title: 'hello',
    				message: 'there',
    				type: "success",
    				insert: "bottom",
    				container: "bottom-right",
    				animationIn: ["animated", "fadeIn"],
    				animationOut: ["animated", "fadeOut"],
    				dismiss: {
    					duration: 5000,
    					onScreen: true,
    					showIcon: true
    				}
    			})
    		}, 5000)
    

    Notification Stuck

    bug 
    opened by don1989 12
  •  Element type is invalid

    Element type is invalid

    Trying to use the latest react-notifications-component version (3.2.6), but getting the following error:

    Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

    My index.js:

    import React from "react";
    import { render } from 'react-dom'
    import { Provider } from 'react-redux'
    import { Route, Switch } from 'react-router' // react-router v4/v5
    import ReactNotification from 'react-notifications-component'
    import { ConnectedRouter } from 'connected-react-router'
    import { PersistGate } from 'redux-persist/lib/integration/react'
    import configureStore, { history } from './src/app/store'
    import { Login } from '/src/routes/Login'
    import { SizerAdmin } from '/src/routes/SizerAdmin'
    import { SizerCalculator } from '/src/routes/SizerCalculator'
    import './src/index.scss'
    
    const { store, persistor } = configureStore(/* provide initial state if any */)
    
    const App = () => (
      <Provider store={store}>
        <ReactNotification />
        <PersistGate persistor={persistor}>
          <ConnectedRouter history={history}>
            <>
              <Switch>
                ...
              </Switch>
            </>
          </ConnectedRouter>
        </PersistGate>
      </Provider>
    )
    
    const rootElement = document.getElementById("root");
    render(<App />, rootElement);
    

    Removing "<ReactNotification />" solves the issue. Any idea?

    opened by alexarsh 9
  • Refer the <ReactNotifications /> from children component?

    Refer the from children component?

    Hi, I have new issue. I already have solution, but want a more concise one.

    How can I fire the event in nested components directly without passing through many component layers?

    So because of the position issue, the <ReactNotifications /> is placed at the top level in the component tree, or in <App />. I did the same.

    However, I have some children components, or actually grand children components which need to fire the alert event of <ReactNotifications /> in <App />.

    The current solution is to pass the event handler to the grand children. If the component tree gets complicated, what else can we do in order to achieve the same result with less code?

    Here's the example code from CodeSanbox.io.

    class App extends Component {
      displayNotification = () => {
        console.log(this.ref);
        this.ref.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>
            <h1>App Component</h1>
            <ReactNotifications ref={ref => (this.ref = ref)} />
            <Parent notify={this.displayNotification} />
          </div>
        );
      }
    }
    
    const Parent = ({ notify }) => (
      <div>
        <h2>Parent</h2>
        <Child notify={notify} />
      </div>
    );
    
    const Child = ({ notify }) => (
      <div>
        <h3>Child</h3>
        <GrandChild notify={notify} />
      </div>
    );
    
    const GrandChild = ({ notify }) => (
      <div>
        <h4>GrandChild</h4>
        <button onClick={notify}>Click for notification</button>
      </div>
    );
    

    In this example, how can I invoke the alert event from GrandChild without passing the event handler through App > Parent > Child > GrandChild?

    Without referring to the ultimate <ReactNotifications /> on top component<ReactNotifications />, all the alerts will overlap on one another if many <ReactNotifications /> is used.

    What is the solution? Redux can solve the state issue, but this is event handler?

    Thank you Duy

    question 
    opened by bobdeei 9
  • Why is there no

    Why is there no "centered" container?

    It would be very useful to have an extra container to show a message at the center of the screen. It could be implemented very easily by doing the following:

    <div class="notification-container-center-center">

    .notification-container-center-center {
        transform: translateX(-50%);
        top: 50%;
        left: 50%;
    }
    
    opened by masbaehr 8
  • Multi-line notification message

    Multi-line notification message

    Hello everyone!

    I need to send a notification with a relatively long message or containing a list of items but as the message gets longer, the width of the notification gets bigger, it doesn't create line breaks neither allows me to create a linebreak by myself on the message content.

    Is it possible to do this linebreak or put custom HTML in the message? Something like this.

    Thanks for the help!

    opened by mendeel 8
  • Notifications Appearing as duplicates

    Notifications Appearing as duplicates

    const notification = {
      title,
      message: info,
      type: "default",
      insert: "top",
      container: "top-right",
      animationIn: ["animated", "fadeIn"],
      animationOut: ["animated", "fadeOut"],
      timingFunction: "ease-out",
      dismiss: {
        duration: 3000,
        onScreen: true
      }
    };
    store.addNotification(notification);
    
    opened by john-mbone 7
  • No animation?

    No animation?

    Hello,

    I have imported the .css for styling, but no animation yet. The .css file does not have style for animation.

    I notice there is a .js.map file, which might relate to the command line npm run build:library:dev. Running this command causes error.

    How can I build this file?


    One more thing, in https://teodosii.github.io/react-notifications-component/, the example does not import the .css file like the doc on this Github page. This should be note on top that the .css needs to be imported for new developers get it working quickly.

    question 
    opened by bobdeei 7
  • Notification with dismiss, get frozen and doesn't dismiss

    Notification with dismiss, get frozen and doesn't dismiss

    An issue that will be a bug, is noticed. Notification freeze, and doesn't dismiss. Neither does with on click. Here the config

    this.defaultConfig = {
                insert: 'top',
                container: 'top-right',
                animationIn: ["animated", "flipInX"],
                animationOut: ["animated", "flipOutY"],
                dismiss: { duration: 8000 },
                dismissable: { click: true }
            }
    

    Keeping happening. The phenomena is seen when multiple notification happen at same time. One of them freeze.

    bug 
    opened by MohamedLamineAllal 6
  • Update README example for 'animationIn/animationOut' options

    Update README example for 'animationIn/animationOut' options

    The current README example for animationIn/animationOut which has comma separated values does not work. Following space separated classes work

    animationIn: ["animated fadeIn"],
    animationOut: ["animated fadeOut"]
    

    I took reference from example source code

    Also, README has two/three variations of sample snippets like using ["animate__animated", "animate__fadeIn"] which is not inline with some of the examples elsewhere in the doc. I guess fixing this would also help people trying out this library.

    opened by palerdot 5
  • Installation failed via yarn

    Installation failed via yarn

    Reproduce

    yarn add react-notifications-component

    error /Users/suraneti/Thanks-Dashboard/node_modules/react-notifications-component: Command failed.
    Exit code: 1
    Command: npx npm-force-resolutions
    Arguments: 
    Directory: /Users/suraneti/Thanks-Dashboard/node_modules/react-notifications-component
    Output:
    npx: installed 5 in 1.661s
    ENOENT: no such file or directory, open './package-lock.json'
    info Visit https://yarnpkg.com/en/docs/cli/add for documentation about this command.
    

    Edit

    1. Install success via yarn with version 2.0.7.
    opened by suraneti 5
  • Bump loader-utils from 1.2.3 to 1.4.2

    Bump loader-utils from 1.2.3 to 1.4.2

    Bumps loader-utils from 1.2.3 to 1.4.2.

    Release notes

    Sourced from loader-utils's releases.

    v1.4.2

    1.4.2 (2022-11-11)

    Bug Fixes

    v1.4.1

    1.4.1 (2022-11-07)

    Bug Fixes

    v1.4.0

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    v1.3.0

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)
    Changelog

    Sourced from loader-utils's changelog.

    1.4.2 (2022-11-11)

    Bug Fixes

    1.4.1 (2022-11-07)

    Bug Fixes

    1.4.0 (2020-02-19)

    Features

    • the resourceQuery is passed to the interpolateName method (#163) (cd0e428)

    1.3.0 (2020-02-19)

    Features

    • support the [query] template for the interpolatedName method (#162) (469eeba)

    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • compatibility issue

    compatibility issue

    Sometimes it stop working I used react-Notification and used store but it gives error someday I am unable to get notification and someday it works fine with same piece of code and no alteration in code. any suggestions?

    opened by coreteams 0
  • Not all styles are renamed

    Not all styles are renamed

    I think it was forgotten to replace .notification with .rnc__notification:

    https://github.com/teodosii/react-notifications-component/blob/master/src/scss/notification.scss#L88-L110

    opened by LobovVitaliy 1
  • Bump terser from 5.10.0 to 5.14.2

    Bump terser from 5.10.0 to 5.14.2

    Bumps terser from 5.10.0 to 5.14.2.

    Changelog

    Sourced from terser's changelog.

    v5.14.2

    • Security fix for RegExps that should not be evaluated (regexp DDOS)
    • Source maps improvements (#1211)
    • Performance improvements in long property access evaluation (#1213)

    v5.14.1

    • keep_numbers option added to TypeScript defs (#1208)
    • Fixed parsing of nested template strings (#1204)

    v5.14.0

    • Switched to @​jridgewell/source-map for sourcemap generation (#1190, #1181)
    • Fixed source maps with non-terminated segments (#1106)
    • Enabled typescript types to be imported from the package (#1194)
    • Extra DOM props have been added (#1191)
    • Delete the AST while generating code, as a means to save RAM

    v5.13.1

    • Removed self-assignments (varname=varname) (closes #1081)
    • Separated inlining code (for inlining things into references, or removing IIFEs)
    • Allow multiple identifiers with the same name in var destructuring (eg var { a, a } = x) (#1176)

    v5.13.0

    • All calls to eval() were removed (#1171, #1184)
    • source-map was updated to 0.8.0-beta.0 (#1164)
    • NavigatorUAData was added to domprops to avoid property mangling (#1166)

    v5.12.1

    • Fixed an issue with function definitions inside blocks (#1155)
    • Fixed parens of new in some situations (closes #1159)

    v5.12.0

    • TERSER_DEBUG_DIR environment variable
    • @​copyright comments are now preserved with the comments="some" option (#1153)

    v5.11.0

    • Unicode code point escapes (\u{abcde}) are not emitted inside RegExp literals anymore (#1147)
    • acorn is now a regular dependency
    Commits

    Dependabot compatibility score

    Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.


    Dependabot commands and options

    You can trigger Dependabot actions by commenting on this PR:

    • @dependabot rebase will rebase this PR
    • @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
    • @dependabot merge will merge this PR after your CI passes on it
    • @dependabot squash and merge will squash and merge this PR after your CI passes on it
    • @dependabot cancel merge will cancel a previously requested merge and block automerging
    • @dependabot reopen will reopen this PR if it is closed
    • @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
    • @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
    • @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
    • @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
    • @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
    • @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
    • @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

    You can disable automated security fix PRs for this repo from the Security Alerts page.

    dependencies 
    opened by dependabot[bot] 0
  • Notifications created in rapid succession may not be removed from the DOM when dismissed

    Notifications created in rapid succession may not be removed from the DOM when dismissed

    We ran across an issue in the wild where users couldn't click on some buttons because the notification container was blocking them. It turns out that in some scenarios where notifications are created in quick succession, notifications can end up not being removed from the DOM. These zombie notifications will run through their exit animation, but afterwards they remain, causing the notification container not to shrink back to zero width.

    I'm able to reproduce this pretty easily by repeatedly spamming out groups of 6 notifications with a dismiss timeout as quickly as I can. If I pass an onRemoval callback, it's never called for the zombie notification. We're on version 3.4.1 but I tried upgrading to 4.0.1 and the bug was still reproducible.

    We'll attempt to hack around this with CSS, but because of the custom store (which is generally great) this needs to be fixed on the RNC side.

    opened by Smona 2
  • uncompatibility with animate.css library

    uncompatibility with animate.css library

    if you import the animate.css into the project, the first time you dispatch a notification if dissapears for a second, then it appears again, (at least trying to play the fade in animation)

    stepts to reproduce:

    create new react / nextjs app npm install [email protected] npm install animate.css

    import react-notifications-component import animate.css

    dispatch a notification with fade in entrance animation

    opened by Loque18 6
Releases(3.3.3)
  • 3.3.3(Jan 26, 2022)

    3.3.0

    Changes

    • Removed default export - You now need to import ReactNotifications (and Store) instead of the default import
    • All typescript declarations are now included in the dist folder

    3.2.0

    Fixes

    • Fixed TS declarations #124
    • Namespaced CSS modules under rnc_* #123
    • Custom width for center containers #108

    Breaking Changes

    • Namespaced CSS modules
    Source code(tar.gz)
    Source code(zip)
  • 3.0.0(Nov 12, 2020)

    Changes

    • TS support
    • Added full-sized containers for top and bottom
    • Changed SASS style to match BEM - breaking change
    • Limit center containers to 350px
    • Allow dynamic expansion of containers based on each notification's width
    • Adedd new API call removeAllNotifications
    • Removed prop-types package, props are now defaulted internally

    Fixes

    • #82, #69, #67, #65, #63, #61
    Source code(tar.gz)
    Source code(zip)
  • 2.4.0(Mar 14, 2020)

    • Fixed issue #56 - Removed random generator for id, instead rely on counter property from store as id
    • Fixed #52 - Swipe was not working properly
    • Implemented #46 - Added center container. Did some changes to top and bottom containers as Chrome blurred content at the beginning of the animation due to the transform property.
    • Changed notifications to take 100% width of the container instead of auto.
    Source code(tar.gz)
    Source code(zip)
  • v2.2.1(Nov 6, 2019)

    • Merged pull request #31 to pass className to component
    • Fixed issue #33 - Unsubscribe from resize once component was unmounted
    • Fixed issue #35 - content now gets id supplied as a prop
    Source code(tar.gz)
    Source code(zip)
  • 2.1.0(Sep 23, 2019)

    • Added option onRemoval directly to the notification object. Each notification will have its own onRemoval, making it easier to track removals.
    • Removed style-loader from webpack dev config
    Source code(tar.gz)
    Source code(zip)
  • 2.0.7(Aug 29, 2019)

    Version 2 of react-notifications-component

    • Deprecated ref usage
    • touchSlidingBack has been renamed to touchRevert
    • cubicBezier has been renamed to timingFunction
    • validators removed from prod build
    • defaults for transitions have been slightly adjusted
    • dismissIcon has been removed
    • added showIcon as a semi-replacement for dismissIcon
    Source code(tar.gz)
    Source code(zip)
  • v1.0.0(Nov 18, 2018)

    Stable and production ready release of react-notifications-component

    • added support for server side rendering
    • added center containers - top-center, bottom-center
    • added callback for notification removal
    • updated test coverage to 100%
    Source code(tar.gz)
    Source code(zip)
  • v0.1.0(Sep 2, 2018)

Owner
Rares Mardare
Passionate Software Developer with focus on JavaScript/ES6, React and modern web development
Rares Mardare
react-redux-toastr is a React toastr message implemented with Redux, primary consists of three things: a reducer, toastr emitter and a React component.

react-redux-toastr demo react-redux-toastr is a React toastr message implemented with Redux, primary consists of three things: a reducer, toastr emitt

Diego Oliveira 754 Nov 29, 2022
A performant and comprehensive React sticky component.

A sticky component wraps a sticky target and keeps the target in the viewport as the user scrolls the page. Most sticky components handle the case where the sticky target is shorter than the viewport, but not the case where a sticky target is taller than the viewport

Yahoo 1.1k Nov 25, 2022
react-toasts is a very simple and lightweight component to create toasts.

Lightweight react toasts manager react-toasts is a very simple and lightweight component to create toasts. Demo url : https://vashnak.com/react-toasts

Anthony Sarais 57 Sep 16, 2022
Cross-platform Toast component for React Native, supports Android, IOS and Web

react-native-toast-notifications Toast component for React Native, supports Android, IOS and Web Features Fully Customizable Swipe to close support Sm

Alireza Rezania 402 Dec 1, 2022
React Toast Component - Custom push notification (Toast) implementation under React + stayed by TailwindCSS.

React Toast Component Online Demo Description This is custom toast component implemented by react hooks + React Context API and stayled using tailwind

Dalibor Kundrat 73 Sep 24, 2022
sAlert is a React component which provides alerts or notifications with rich configuration possibilities.

This lib is no longer maintained. It needs major adjustments and rewrites. I hope I'll find some time for it in the future. Sorry. React sAlert compon

Julian Ćwirko 658 Sep 6, 2022
A light-weight React toast component with extremely easy API.

Light Toast A light-weight React toast component with extremely easy API. Online Demo Installation yarn add light-toast Version 0.2.0 and above requir

Albert 57 Jul 6, 2022
React component with HTML5 Web Notification API

React component with HTML5 Web Notification API. This component show nothing in dom element, but trigger HTML5 Web Notification API with render method in the life cycle of React.js.

Mobilus Corporation 264 Oct 4, 2022
react-notification-timeline is a reactjs based component helps in managing the notifications in time-based manner

?? react-notification-timeline react-notification-timeline is a reactjs based component helps in managing the notifications in time-based manner. It i

Tapas Adhikary 117 Nov 9, 2022
A lightweight react toast notification component. 11 kb ~

React Toast Component A lightweight react toast notification component. 11 kb ~ Preview: Demo (npm: NPM github: Github) Installation Prerequisite: Rea

tumfoodery 4 Mar 26, 2022
A React component that notifies you when it enters or exits the viewport

A React component that notifies you when it enters or exits the viewport. Based on a IntersectionObserver, resulting in improved performance.

Veniamin Shitikov 10 Apr 15, 2022
React Native Clipboard API with Animated toast message component

react-native-clipboard-toast React Native Clipboard API with Animated toast message component Support both Android and iOS | Used react native Clipboa

Idan Levi 10 Sep 26, 2022
Beautiful, Zero Configuration, Toast Messages for React. Only ~ 4kb gzip, with styles and icons

Cogo Toast Beautiful, Zero Configuration, Toast Messages for React ~4kb gzip (with styles and icons) https://cogoport.github.io/cogo-toast/ Install vi

Cogoport 667 Nov 24, 2022
:postbox: A simple and customizable React notifications system

Reapop A simple and customizable React notifications system Summary Compatibility Demo Installation Integration & usage With React & Redux With React

Louis Barranqueiro 1.3k Nov 16, 2022
Alerts for react - Shows an alert in the position and for the duration specified.

react-alerts-plus Demo Shows an alert in the position and for the duration specified. You will most likely want to pass your own custom alert componen

Brian Andrews 6 Sep 6, 2022
Simple and lightweight toast package for React.js

Simple and lightweight toast package for React.js

Fuad Pashayev 11 Jul 7, 2022
This is a wrapper of the 'React' library 'React-Toastify' for usage in Shiny applications.

shinyToastify This is a wrapper of the 'React' library 'React-Toastify' for usage in Shiny applications. Six available types: The toast container and

null 9 Apr 28, 2022
Minimal toast notifications for React.

React Toast Minimal toast notifications for React. Get started Quick start Install with yarn yarn add react-toast Install with NPM npm install react-t

Mohammadreza Ziadzadeh 58 Nov 24, 2022
React notification made easy 🚀 !

React-Toastify ?? React-Toastify allows you to add notifications to your app with ease. No more nonsense! Installation $ npm install --save react-toas

Fadi Khadra 10.1k Dec 3, 2022