igorprado / react-notification-system Goto Github PK
View Code? Open in Web Editor NEWA complete and totally customizable component for notifications in React
Home Page: http://igorprado.github.io/react-notification-system/
License: MIT License
A complete and totally customizable component for notifications in React
Home Page: http://igorprado.github.io/react-notification-system/
License: MIT License
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?
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
Can anyone package it for meteor? As there is no notification system package for meteor-react at atmospherejs.
Not pass a style prop to the compoent in render.
Regards.
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!
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?
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
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.
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)
.
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.
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
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 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.
var style = {
Wrapper: {
position: 'absolute',
left: 0, right: 0, bottom: 0, top: 0,
backgroundColor: 'rgba(0, 0, 0, 0.35)',
}
}
<NotificationSystem ref='notifier' style={App.style} />
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?
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.
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?
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.
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.
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?
has anyone be able to remove a notification dynamically. I honestly do not follow what was added on the readme file :/
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.
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.
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.
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
.
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?
Just a char 'x' does not cut it...
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
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)
Your library looks great! Would you be open to providing a UMD build for use in non-Node environments (like via a CDN)?
Thanks
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
Is it possible to replicate a confirmation notification using an array of button/callbacks? i.e. "Are you sure?" with Yes/No buttons?
as the title, thx!
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!
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?
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,
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?
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 ๐
As discussed here x becomes ugly.Can be easily solved by adding charset. But I thought better report here.
https://npmcdn.com/[email protected]
looks like you're missing some dist files
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
It seems that the live demo on http://igorprado.com/react-notification-system/ is down.
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} />
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).
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.
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.
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?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.