Provides snackbar notifications for React

React Notification

React Notification provides snackbar notification messages and notification stacks. The default visual style and interaction follows Material Design guidelines for snackbars and can be fully customized.

Warning

As of 2019 December 3, this project is deprecated and unmaintained. The package is still available on npm and can be installed, but I would recommend finding an alternative that supports new versions of React. Material UI includes a snackbar component and is a good option.

Documentation and Help

Releases

Maintainers

License

Licensed with The MIT License (MIT).

0 Open More issues

Closed

Allow Immutable.List (or Iterable) to be passed

Let's take this code:

const notifications = Immutable.List();

...

return <NotificationStack
      notifications={notifications}
      ...
    />);

The code works, but in the console I have this error:

app.js:9323 Warning: Failed prop type: Invalid prop `notifications` of type `object` supplied to `NotificationStack`, expected `array`.
    in NotificationStack (created by SnackBar)
    in SnackBar (created by Connect(SnackBar))
    in Connect(SnackBar) (created by Sidebar)
    in div (created by Sidebar)
    in Sidebar (created by Connect(Sidebar))
    in Connect(Sidebar) (created by CompanyPage)
    in CompanyPage (created by Connect(CompanyPage))
    in Connect(CompanyPage) (created by RouterContext)
    in RouterContext (created by Router)
    in Router (created by Root)
    in Provider (created by Root)
    in Root
    in AppContainer

I will lose the benefits of Immutable if I change the code to Immutable.List().toArray (or toJS)) as presented here

Also here.

Other comment:

Good question. I Wouldn't do it in the store though, since then you lose the abillity to do a simple object comparison (prevState !== this.state) if you'd want to optimize rendering with shouldComponentUpdate

documentation help wanted

opened Sep 14, 2016 by cristian-sima 21

Closed

Add onClick prop to NotificationStack definition

Hello! :wave:

This template enables you to open an issue that is valuable for you, the project, and the GitHub community. :two_hearts:

Before submitting an issue, please:

Agree the Code of Conduct.
Read the Contributing Guide.

If you are new to open source, check out this 38 minute course on how to contribute to open source on GitHub. It's free! :smile:

Before submitting a pull request, please make sure the following is done:

Add tests for new functionality or bug fixes, following the red/green/refactor method
Ensure all tests pass: npm test
Update and/or add documentation

In order to merge your Pull Request, tests and documentation are required.

opened Aug 9, 2018 by clarkbynum 14

Closed

Add initial TypeScript definitions

documentation in progress

opened Jun 11, 2017 by corydeppen 13

Closed

Dismiss notification changes

Proposed changes

Click on action area to dismiss: When clicking on an action, for instance a submit action, this should also remove the active status of the notification and initiate dismiss.
Click on non-action area to dismiss (originally #79): Dismiss when clicking anywhere on the notification, but the action.

From issue #79:

Some of our notifications are longed lived. It would be nice to give the user the option to dismiss a notification simply by interacting with it. According to Google Material docs, this is usually done with a swiping action, but I think just a simple click is sufficient.

documentation help wanted

opened Jul 7, 2016 by BerkeleyTrue 12

Closed