puranjayjain / react-materialui-notifications

Spec compliant notifications for react and material ui users

react-materialui-notifications

❤️ the package? Then ⭐ it!

Spec compliant notifications for react and material ui users

Installation

• Use the latest github release
• or Install via npm i react-materialui-notifications --save

Demo

For a demo see the docs site (below), for usage example see src/app/Main.js

Documentation

Consult the website https://puranjayjain.github.io/react-materialui-notifications

Versioning

For transparency into our release cycle and in striving to maintain backward compatibility, the project is maintained under the Semantic Versioning guidelines. Sometimes we screw up, but we'll adhere to those rules whenever possible.

Development

• If developing the project use gulp run.bat or the equivalent command written in it.
• To release the project use gulp run.bat then run gulp release.bat or the equivalent command written in them.

TODO

• a lot of core functionality
• finish up props of the notification class
• implement expanding notifications
• show the priority notifications on top
• implement custom notification element which the user can pass (PR required)
• styles for position
• swipe to dismiss
• i18n

License

The Project is Licensed under the MIT License

react-materialui-notifications's Issues

autoHide , not working

As below, i've passed autoHide props, but it did not work. any help will be great full.

showNotification = (msg) => {
    ReactMaterialUiNotifications.showNotification({
      title: 'Success',
      additionalText: msg,
      icon: <Message />,
      iconBadgeColor: deepOrange500,
      overflowText: "",
      timestamp: moment().format('h:mm A'),
      autoHide:2000,
      zDepth:5
    })
  }

Cant close notifications

i cant close the notification ..
I try both the top right close button and a close function at a dismiss button trying set the open prop.

material-ui ver 0.17.1
react 15.4.1

showNotification(msgTitle, msgAdditionalText, msgOverflowText) {
ReactMaterialUiNotifications.showNotification({
title: msgTitle,
additionalText: msgAdditionalText,
icon: ,
iconBadgeColor: '006400',
overflowText: msgOverflowText,
timestamp: moment().format('h:mm A'),
});
}
<ReactMaterialUiNotifications
desktop
transitionName={{
leave: 'dummy',
leaveActive: 'fadeOut',
appear: 'dummy',
appearActive: 'zoomInUp',
}}
transitionAppear
transitionLeave
/>

Remove notification from list on dismiss

• Remove the notification from the list
• allow a way for the user to pass a dismiss button in overflowButton

Call setState after or forceUpdate once a notification was added

I tried this library and at first I could not see the notifications. Looking at the code I found out that you are using a global (scoped) variable to keep track of the notifications called notifications

The problem is that when you modify that, the component will NOT rerender automatically.
Normally this is done using setState and then you would read directly from the state. In this case I think you have to force the update somehow.

In your demo it works just because you are incrementing a counter after you ccreated a new notification.

this.setState({
      count: ++this.state.count
    })

This will update the component and as well all its subcomponents (in this case the notification component will get updated because it is a child)

Please give actual examples of usage in your .md file

I love what I see is possible to do, but newer developers are going to have a difficult time reading your documentation and understanding at a glance how to implement your product.

if you could give smaller code examples in the MD file and samples on how to include it in an application, your product would likely grow in popularity

How to use with new version V1 of material-ui

Issue Templates

• Search the currently opened issues and past issues before posting a new one.
• Escalate issues by making a reaction of 👍 at the first comment on the issue (the issue author's)
• Be clear and try to open an issue with one problem at a time (open multiple issues if you have multiple problems)

Having some trouble

I'm running into a few issues. Have you tested the package since upgrading to the new material-ui?

mui/material-ui#5573

Enhancement: Optimize the hierarchy

I am working on my first project using the wonderful material-ui library, and your notifications library. As part of my project, I needed to make the notifications be available globally. I pulled up your component and connected it with Redux. However, I noticed that none of my leave animations were working.

Digging through the source code, I noticed that there is a separate ReactCSSTransitionGroup being created for each notification, and the keys for all the child elements were same (perhaps the side effect of pulling the component up in a wrapper component).

Further digging revealed that the hierarchy of the various elements is as follows:
ReactMaterialUINotification>Notification>ReactCSSTransitionGroup>List>List Item

It appears that there is separate ReactCSSTransitionGroup and List being created for each notification.

Wouldn't it be better to have it as such:
ReactMaterialUINotification>List>ReactCSSTransitionGroup>List Item (as Notification) ?

still taking PropTypes from React

still taking PropTypes from React in 'master/src/app/ReactMaterialUiNotifications.js':

Thanks :)

Nougat Style Notifications

The newer material design spec states that there is a newer notification behavior from Nougat onwards.
Need suggestions and ideas and will keep this thread for them

• A new repo with a fresh version system
• Rewritten with recompose + material ui v1.0 + webpack 3
• es6 + es7 + drop proptypes from build support
• upto latest spec
• new api which doesnt require forced updates
• manage it with lerna

Enhancement : Add tests and coverage

Enhancement : Add tests and coverage

I was just looking through the code and thought it would be nice to add in some tests and have some coverage in. How's the thought @puranjayjain ?

• Search the currently opened issues and past issues before posting a new one.
• Escalate issues by making a reaction of 👍 at the first comment on the issue (the issue author's)
• Be clear and try to open an issue with one problem at a time (open multiple issues if you have multiple problems)

Notifications doesn't removes from DOM

Hi! I've explored your project's demo site and saw, that currently notifications doesn't removes from DOM, when clicking on 'close' button. Is it desired behavior?