igorprado / react-notification-system Goto Github PK

Is it possible to add a feature for a shared reference to the notification system? Perhaps we could register this in the root application layer:

<NotificationSystem shared="app" />

Each time it were rendered, it would store its reactjs ref in a simple object in shared_notices.js:

import shared_notices from 'react-notification-system/shared-notices'
shared_notices.app.addNotification(

The idea is to encourage component nesting. Creating good modular components often means there will be many of them and they will be nested often. It is better and easier to program to not have any requirements to pass redundant references. If you have an alternative please let me know.

Clicking the "this file" link in the sentence "Refer to this file to see what can you override" under the Overriding (styles) section results in a 404.

https://github.com/igorprado/react-notification-system/blob/develop/dist/styles.js

It seems that the live demo on http://igorprado.com/react-notification-system/ is down.

It would be a nice feature to have that features could be controlled via props exclusively. I.e. the notification component takes a set of props that details the notifications that should be shown (keyed as well). This would allow for the control of the notifications via something upstream (like Flux) of the JSX component.

https://npmcdn.com/[email protected]

looks like you're missing some dist files

Thanks

As discussed here x becomes ugly.Can be easily solved by adding charset. But I thought better report here.

What do you think of making dismissable: false usable without setting an action? The reason behind this is, if I wanted to have another part of the application remove the notification, then there is no need for an action.

Thanks!

I got two warnings after migrating to [email protected]:

Warning: React.findDOMNode is deprecated. Please use ReactDOM.findDOMNode from require('react-dom') instead.

From this line.

Warning: `div` was passed a style object that has previously been mutated. Mutating `style` is deprecated. Consider cloning it beforehand. 
Check the `render` of `NotificationItem`. 

Previous style: {position: "relative", width: "100%", cursor: "pointer", borderRadius: "2px", fontSize: "13px", border: "1px solid", borderTopWidth: "4px", margin: "10px 0 0", padding: "10px", display: "block", WebkitBoxSizing: "border-box", MozBoxSizing: "border-box", boxSizing: "border-box", WebkitBoxShadow: "0px 0px 5px 2px rgba(0,0,0,0.1)", MozBoxShadow: "0px 0px 5px 2px rgba(0,0,0,0.1)", boxShadow: "0px 0px 5px 2px rgba(0,0,0,0.1)", opacity: 0, transition: "0.3s ease-in-out", isHidden: {opacity: 0}, isVisible: {opacity: 0.9}, borderColor: "#edbfbf", borderTopColor: "#ec3d3d", backgroundColor: "#f4e9e9", color: "#412f2f", right: -200}. 

Mutated style: {position: "relative", width: "100%", cursor: "pointer", borderRadius: "2px", fontSize: "13px", border: "1px solid", borderTopWidth: "4px", margin: "10px 0 0", padding: "10px", display: "block", WebkitBoxSizing: "border-box", MozBoxSizing: "border-box", boxSizing: "border-box", WebkitBoxShadow: "0px 0px 5px 2px rgba(0,0,0,0.1)", MozBoxShadow: "0px 0px 5px 2px rgba(0,0,0,0.1)", boxShadow: "0px 0px 5px 2px rgba(0,0,0,0.1)", opacity: 0.9, transition: "0.3s ease-in-out", isHidden: {opacity: 0}, isVisible: {opacity: 0.9}, borderColor: "#edbfbf", borderTopColor: "#ec3d3d", backgroundColor: "#f4e9e9", color: "#412f2f", right: 0, height: 63}.

I'm not sure but I think it is thrown because this._styles is mutated between renders.

I expect the noAnimation option to stop the 'slide-in' animation as well. Currently when using the noAnimation option, it only prevents the 'slide-up' animation on dismiss.

I am using react-notification-system version 2.7 with react version 15.1.

Hi,

I'm having a very rare bug which is extremely difficult to reproduce, but my best guess at what is happening is that react-notification-system is not detecting transitionend in some cases.

We needed to customize the popups a fair bit so we set style={false}, set transition: opacity 0.3s on .notification, and set opacity: 0 on .notification-hidden.

From my understanding of the code, when a NotificationItem is instantiated, it hooks into the transitionend event. When the library decides it's time to autodismiss the popup, it applies the class notification-hidden. If we turn off the styling, we're supposed to make sure that when this class is applied, it kicks off a transition, and at the end of the transition the library calls this._didNotificationRemoved from the NotificationSystem component.

That all seems to be working fine 99% of the time, but for some reason, once in a while notifications will fade out (so the opacity transition did occur) but the DOM node hangs around, and blocks interaction of items underneath the hidden popups. If I manually change the opacity of these stubborn invisible notifications in the dev tools, they get properly removed. So somehow the event listener is working, but misses the first transition.

Do you have any idea what could be causing this?

One one clicks on the on the notification message (anywhere) it disappears. It is a good feature so ... But If the user needs to copy text they will drag making a selection then release the mouse. It would be good if the notification did not disappear before the Ctrl+C copy can take place. If you want to preserve the click to remove feature it may be possible to detect if there is a selection in the message and suppress. The X can still be used to close the message.

Just a char 'x' does not cut it...

Unsure if Ive missed something in the docs but my understanding is that it should still be removing the notifications after the specified timeout, or if the dismiss button is clicked, even with styles disabled.

Not quite sure why the absence of styling would cause this behaviour, but that's what I'm seeing; The classes for animation are updated but the DOM elements aren't removed when style={false}

For now I'm going to leave styles on and nuke them with a shower of !importants, but ... :(

Any guidance would be appreciated. Thanks for the library 👍

I've been looking at #10 and I'm trying to update and rebuild to the example to test but having some problems with var NotificationSystem = require('react-notification-system');. I can repoint it to require('../../dist/notification-system'); but will then complain that there are two copies of react on the page. Is there some browserify trick I'm missing?

I've forked the project. npm install has downloaded more than 600MB, this is unacceptable IMHO.

However, I see in package.json:

"main": "dist/NotificationSystem.js"

May I wonder why? A CommonJS module should NOT export a "bundled" file but the module entry point. Of course you can create some dist/xxxxxx.bundle.js file so it's usable using bower or a <script> tag, but that's not the point of CommonJS modules.

Anyhow, how to create such a "dist/NotificationSystem.js"? npm run prebuild && npm run build does not generate the dist/ directory...

I'm using a position of 'tr' (top right) for the notification list. As new notifications come in, they are added to the bottom of the list.

What would be useful is an option so that new notifications would be added to the top of the list and the other notifications would be shifted down. Is that currently possible or in the works?

My React Version:
[email protected]

My ReactNotificationSystem Version:
[email protected]

This error occurs if the notification is removed:
invariant.js:39 Uncaught Invariant Violation: removeComponentAsRefFrom(...): Only a ReactOwner can have refs. You might be removing a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Can anyone package it for meteor? As there is no notification system package for meteor-react at atmospherejs.

Hi,

how we can handle notifications with complex cms structure with multilevel(parent->subparent->child) component structure.
and different notifications(add/edit/delete) with single onchange add listener?

Rather than worrying about how to integrate with Redux/Flux/Reflux/etc, I've found the best way to integrate this with a single page app is to use context.

Given this structure in my App container component's render:

<div >
    <Header />
    <NotificationSystem ref={ref => this.notifications = ref} />
    {children}
   <Footer />
</div>

Side note: you can pass a function to ref rather than setting it in a lifecycle method like "componentDidMount" (as shown in the example code).

Then you put this in the App component...

  static childContextTypes = {
    addNotification: PropTypes.func,
  };

  getChildContext() {
    return {
      addNotification: this.addNotification.bind(this),
    };
  }

  addNotification(notification) {
    this.notifications.addNotification(notification);
  }

Then, when any child component that is rendered inside the App component declares a context type like so:

static contextTypes = {
  addNotification: PropTypes.func.isRequired,
};

Then you can call it like this in that child component:

someFunction(){
    this.context.addNotification({
      title: 'New Message',
      message: "You've received a message from the server!",
      level: 'warning',
      dismissable: false,
    });
}

Using context is easier, IMO, than using a redux/reflux/flux because this component was made to have a function called rather than have its state set, which context is much better for.

When I call addNotification, I get an error that says React.findDOMNode is not a function. So I added a debugger line in notification-item.js and checked out React.version. It reported as "12.2" which is not the version I have installed via NPM. findDOMNode was introduced in React 13.0. Is this a problem in your package definition?

It would be nice to be able to override the defaultColors object in styles.js, so one doesn't have to change the colors of the borders, background, text color, etc individually.

Hi, your library is brilliant. I have been using React for ~4 months and everything was going well until I hit the notifications problem. It seems to raise many issues with threading in JS, etc, and I feel like if you could write a few paragraphs on the fundamentals of your library architecture a lot of mid-range javascript developers could really benefit, myself inlcuded.

In any case, thanks again!

I wonder if its possible to make sure make sure the previous notification are closed/removed before its possible to add/popup a new one? So you dont have like 10 notifications up at the same time?

I want to change width to 260px. I tried overriding style, but width is still 320px.

Here is my code snippet. Thank you.

const style = {
  Containers: { // Override the notification item
    DefaultStyle: { // Applied to every notification, regardless of the notification level
      width: 260
    }
  }
};

....

<NotificationSystem ref='notificationSystem' style={style} />

Enhancement suggestion: besides preventing notification with same uid shown, it would be better there have an option to reset existing notification's remaining time with same uid.

eg.
trigger Notification A with uid='notify-a'
-> A shows, timeLeft = 5s
delay(2s)
trigger Notification A-clone with uid='notify-a'
-> A.timeLeft = 5s

Is it possible to add more than one action button to a notification? eg. On a notification that confirms deletion of an item: "Are you sure you want to delete this item? action 1: YES / action 2: NO".

It doesn't look like this is currently possible, unless I'm missing something?

Thanks

as the title, thx!

It'd be great for a simple demo of how to use redux with this system and utilizing actions to trigger the notifications. I'm still not sure how to accomplish this.

Your dist folder is polluted with .module-cache directory. Try to add it to .npm-ignore.

Notification should accept message as function for HTML instead of plain HTML strings

this._notificationSystem.addNotification({
  message: () => { return <span><MessageFormat message='translate.me'/></span> )},
  level: 'success'
});

This would allow usage of JSX within notifications and remove the need for dangerouslySetInnerHTML

Sometimes it is useful to show in-progress operation by a notification (e.g., "Saving...") and it would be nice to have the ability to dismiss the notification from the code upon the completion of the request (usually some ajax with unpredictable time so autodismiss timeout is useless)

As for the API, one option would be for addNotification to return an opaque handle (actually, looking at code, it could be notification.uid and then have dismissNotification(handle)

I am trying add react-notification-system into ,my work and started to encounter this error.
I cross checked for difference in react library in project, all i made use was 0.13.3.
what i am doing is,
notification.js

var NotificationSystem = require('react-notification-system');

var NotificationPartial = React.createClass({
    _notificationSystem: null,
    componentDidMount: function() {
        this._notificationSystem = this.refs.notificationSystem;
        this._notificationSystem.addNotification({
            message: 'Notification message',
            level: 'success'
        });
    },
    render : function(){
        return ( <NotificationSystem ref="notificationSystem" /> )
    }
});

module.exports = NotificationPartial;

MainComponent.js

var NotificationPartial = require('./NotificationPartial');

---
render : function(){
    if(this.state.activeTab){
         var notifyMe = <NotificationPartial message={"this is a message"}/>;
    },
    return ( <div> {notifyMe} </div> )
}

When i tried to check this, i got

transactionWrappers :

0: Object
close: () { [native code] }
initialize: emptyFunction() {}
    arguments: null
    caller: null
    length: 0
    name: "emptyFunction"
    prototype: emptyFunction
    thatReturns: makeEmptyFunction(arg) {
    thatReturnsArgument: (arg) { return arg; }
    thatReturnsFalse: () {
    thatReturnsNull: () {
    thatReturnsThis: () { return this; }
    thatReturnsTrue: () {
    __proto__: Empty() {}
   <function scope>
    __proto__: Object
1: Object
close: () {
initialize: emptyFunction() {}
    arguments: null
    caller: null
    length: 0
    name: "emptyFunction"
    prototype: emptyFunction
    thatReturns: makeEmptyFunction(arg) {
    thatReturnsArgument: (arg) { return arg; }
    thatReturnsFalse: () {
    thatReturnsNull: () {
    thatReturnsThis: () { return this; }
    thatReturnsTrue: () {
    __proto__: Empty() {}
   <function scope>
   __proto__: Object
  length: 2
__proto__: Array[0]

this.wrapperInitData[i] : 

0: undefined
1: Object
2: true
3: undefined
length: 4

after which i got this error
Where am i going wrong
how can i rectify the issue?

hi @igorprado

i read the docs, it said

If set to false, the notification will not display the dismiss ('x') button and will only be dismissible programmatically or after autoDismiss timeout.

but what i want is something like google's inbox 's snackbar. it keep the ('x') but cannot close on click content event.

so, the dismissible option i think should be (both|click|button|none) is better than (true|false).

Your library looks great! Would you be open to providing a UMD build for use in non-Node environments (like via a CDN)?

Have you thought about using semver?

We had a problem in a project with this library as dependency, as 0.1.16 updated to React 0.14 and required react-dom. But our project still uses 0.13. The npm update / install automatically installed 0.1.16 as it was set to ^0.1.14.

Not pass a style prop to the compoent in render.

Regards.

has anyone be able to remove a notification dynamically. I honestly do not follow what was added on the readme file :/

I'm struggling as a noobie to figure this out and translate it to ES6. Does anyone have an example that I can extrapolate out (will be happy to then turn into step by step instructions for the docs page).

Thanks in advance to anyone who can help! Much appreciated.

Is there currently a way I can have an action button on a notification that does not dismiss the notification? In my user story, I want to click on the action button and bring up a dialog with info. In this case, if the user intended to dismiss the notification, they could click anywhere else on it besides the action button.

After ajax call i set props to:

this._notificationSystem.addNotification({
        title: this.props.title,
            message: '',
            level: 'error',
            position: 'br',
            autoDismiss: 5

but first i resive notif(and its empty) and than this.props.title, beacuse ajax.

Please help me fix it.

Is it possible to replicate a confirmation notification using an array of button/callbacks? i.e. "Are you sure?" with Yes/No buttons?

Thanks for a great UI component. As a next step I see the need to support custom backend and popular social networks, for direct posting to and notification from them directly inside a React app. Are there any React integrations with Twitter or Facebook available that you might know of?

Hi ,

While working on my project I have come across a issue where I want to add multiple action button but unable to do so. So request you to modify the code to allow adding more then one actions.

Thanks
Vivek Pandey

Would be nice to have a call that clears all notifications without keeping track of the notification id.

added a PR with that functionality: #70

Hi,
I want to display a notification with a short sentence and an in-line button in some cases and need to add a conditional class into the notification somehow as I also want to keep the non-inline version.

This could be also nice for implementing custom-level notifications that some advance users might want to make.

Thanks for a very useful component.

We are wanting to integrate this into a large application that already has a large amount of CSS using LESS. Our LESS files will have variables that define common colours for backgrounds and such.

This makes it hard to use react-notification-system, as from a JSX component I'd have to code in the same colours that are in our LESS files and override what I can in the JSX component.

The only alternative I see is to turn of the component's styles completely but the caveat is that since I want to change minor pieces of the styling I need to rebuild the styles in JS into a LESS or plain CSS file.

Are there any other suggestions on this? Would it be possible to have a built CSS file that is included in the dist?