louisbarranqueiro / reapop Goto Github PK
View Code? Open in Web Editor NEW:postbox: A simple and customizable React notifications system
Home Page: https://louisbarranqueiro.github.io/reapop
License: MIT License
:postbox: A simple and customizable React notifications system
Home Page: https://louisbarranqueiro.github.io/reapop
License: MIT License
Running jest
tests results in:
> FAIL app/scripts/containers/App.spec.js
Test suite failed to run
SyntaxError: Unexpected token ILLEGAL
at transformAndBuildScript (node_modules/jest-runtime/build/transform.js:320:12)
at Object.<anonymous> (node_modules/reapop-theme-bootstrap/index.js:3:11)
at Object.<anonymous> (app/scripts/containers/App.jsx:4:55)
> PASS app/scripts/containers/App.spec.js
<App>
✓ should exist
Hey, just recieved this warning. Sure it might be connected to our linting but this is something that should be fixed here.
Warning: Failed prop type: Required prop `theme.notificationsSystem.className` was not specified in `NotificationsSystem`.
in NotificationsSystem (created by Connect(NotificationsSystem))
in Connect(NotificationsSystem) (created by App)
in div (created by App)
in App (created by Connect(App))
in Connect(App) (created by StaticRouter)
in MatchProvider (created by StaticRouter)
in Broadcast (created by LocationBroadcast)
If I load React, Redux etc, as separete scripts and put it to externals in webpack.config.js, webpack all the same include it in to my bundle and I have: react.js and bundle.js (witn second React).
The problem in file /src/components/NotificationsContainer.js
, line 2:import TransitionGroup from 'react/lib/ReactCSSTransitionGroup';
if I comment it, all works good.
I fix it on my side like this:
'react': 'React',
'react-dom': 'ReactDOM',
'redux': 'Redux',
'react-redux': 'ReactRedux',
'react-router': 'ReactRouter',
'redux-logger': 'reduxLogger',
'redux-form': 'ReduxForm',
'react/lib/ReactTransitionGroup': 'React.addons.TransitionGroup',
'react/lib/ReactCSSTransitionGroup': 'React.addons.CSSTransitionGroup',
}```
But I think that it should be fixed on your side.
If the following is the config of your notification and you link to an image that does not exist the notifcation will never run, instead the process returns a 404 error in the console.
{
title: 'Are you sure?',
message: 'This will permanantly remove your project.',
dismissible: true,
status: 'warning',
position: 'tr',
image: 'path-to-a-missing-image', // The issue is here, if this line is removed the code will run
dismissAfter: 0,
buttons:[
{
name: 'I\'m sure',
primary: true,
onClick: () => {
// Do something
}
},
{
name: 'Cancel',
primary: false,
onClick: () => { // do sth elese }
}
]
}
The whole notication will stop working if no valid image is supplied
This should be a little more forgiving, image onError should be ignored completely.
Is it possible to dismiss the notifications with a swipe on touch devices?
React 15.5 deprecates createClass, PropTypes and ReactTestUtils. These need to be reflected in the codebase to avoid warnings & future incompatibility.
Currently, we have support to use same notifier instance to be updated via updateNotification.
but that instance doesn't provide information whether it is dismissed or is visible.
There is configuration 'onAdd', 'onRemove' will runs on Mounting/Un-mounting.
Notifier instance should have state whether instance was dismissed or still open.
consider,
if(this.notifier)
{
Object.assign(this.notifier, notificationData);
updateNotification(this.notifier)
}
else
{
this.notifier = notify(notificationData);
}
if this.notifier is dismissed there is no way to create new instance.
reapop/src/store/notifications.js
Line 146 in 47593d0
state[index] = Object.assign({}, defaultNotification, payload); // <--- mutation!
return [...state];
should be more like
return [
...state.slice(0, index),
Object.assign({}, defaultNotification, payload),
...state.slice(index + 1)
]
Any chance to have it?
A new version of Redux was released about a week ago. I'm using it right now in a new app I am making, and reapop seems to handle it well. The package.json explicitly specifies the package to work with Redux 2 and 3 only, thus resulting in an error on install.
Could we bump the dependency?
I've tried setting the overflow property on the notifications-container--br, but I can't get the div to scroll vertically when there enough notifications to exceed the height of the screen. There's probably some CSS magic I'm missing here, but any suggestions?
Hey. I wanted to ask If you are interested in introducing middleware for handling simple object based actions (testable!).
I've introduced this in our app and it works well.
import { addNotification } from 'reapop';
const ACTION_TYPE = '__SEND_NOTIFICATION__';
const notificationMiddleware = () => (next) => (action) => {
if (action.type && action.type === ACTION_TYPE) {
return next(addNotification(action.payload));
}
return next(action);
};
export default notificationMiddleware;
export const createNotification = (payload) => {
return Object.assign({}, {
type: ACTION_TYPE,
payload
});
};
Hi,
I'm implementing a notification system coupled to redux-axios-middleware. I'm having a problem updating and removing notifications — I can trigger them, but there is no zero-boilerplate way to save their IDs for future reference.
I would like to be able to define the ID of the message myself, allowing to
Basically, I would love to use a scheme similar to Redux action naming conventions:
Seems that I could do this by implementing an action creator and a coupled reducer that would map between natural IDs and automatically generated ones. But it would be really cumbersome, because Redux reducers cannot dispatch actions and I am not sure how then to handle this. Doing this in reapop would be the most natural way to go
notifications.filter is not a function
Run without errors.
I just did the initial configuration and it throws this error.
I also went through the NotificationsSystem component in lib/components and the error is thrown at line numbers 65 and 79 (where notifcations.filter is called).
export function handleDelete(formData) {
return (dispatch) => {
dispatch({
type: DELETE_MENU
payload: new Promise((resolve, reject) => {
let notif = notify({
status: 'loading',
title: 'Deleting.....',
})
dispatch(notif);
client.post('menus/delete', formData)
.then(({ meta }) => {
notif.status = 'success';
notif.message = 'Your file has been successfully deleted';
notif.dismissible = true;
notif.dismissAfter = 5000;
updateNotification(notif);
resolve(formData);
})
.catch((error) => {
errorHandler(error);
reject(error);
});
}),
});
};
}
The problem is the notif with loading is spawn correctly. But when the promise is done, and updateNotification
is not properly running (the loading notif still shown).
Currently, we know that there are two available themes to use in reapop, with very nice instructions how to use those themes etc..
It would be nice if we could see how they work with react pop, what does it change if I use default theme or Bootstrap theme. Maybe it would be a nice feature to add into demo app - theme selector?
allow notification message to contain react components in message in case of AllowHTML = true
const refreshList = function(){...};
const msg =(<div><span>Updated Successfully<span><a href="#" onclick={refreshList}></a></div>);
notifier.message= msg;
notifier.allowHTML=true;
notifier.status = 'success';
notifier.dismissible = true;
notifier.dismissAfter = 15000;
notifier.buttons=[{
name: 'OK',
primary: true,
onClick: () => {
}
}];
dispatch(updateNotification(notifier));
creates message with [object Object]
I think we should add a status type for input
which would include an input field under/within a notification similar to that of OSX. In OSX, some notifications have an input area for quick responding (such as iMessage); these are usually only single line inputs. I think this would help as the notification could now also take the place of a prompt()
and return textual feedback from the user in the form of a triggered callback function upon user completion.
I want to propose an additional feature for Reapop.
I think you've done a great job on the library so far, but I want to recommend adding Markdown support in title
and message
properties. This would be a safer way to allow for styled text without the risk of allowing html directly. There are numerous open-source React markdown renderers. Let me know if you would like me to elaborate; however, I think the concept is simple enough.
There is no example in the doc on how to use html in a message's notification. I'm trying to pass a link with an a href tag.
It`ll be great if it supports customized component
Hi, I am using your module for notification system in my project, but i am not able to do updateNotification since notif is comes as undefined, i am using the below code from your demo? am i missing something here?
"use strict";
import React, { Component } from 'react';
import {connect} from 'react-redux';
import NotificationsSystem, {addNotification as notify, updateNotification} from 'reapop';
import theme from 'reapop-theme-wybo';
class Index extends Component {
constructor(props) {
super(props);
this._onClick = this._onClick.bind(this);
}
_onClick() {
const {notify, updateNotification} = this.props;
const notif =notify({
id : "1",
title: 'Welcome',
message: 'you clicked on the button',
status: 'success',
dismissible: false,
dismissAfter: 0
});
//notif comes undefined!!!
console.log(JSON.stringify(notif));
this.props.dispatch(notif)
setTimeout(function() {
notif.status = 'success';
notif.message = 'Your file has been successfully uploaded';
notif.dismissible = true;
notif.dismissAfter = 5000;
this.props.dispatch(updateNotification(notif))
}, 1000);
}
render() {
return (
<div>
<NotificationsSystem theme={theme}/>
<button onClick={this._onClick}>Add a notification</button>
</div>
);
}
}
const mapStateToProps = (state, ownProps) => {
return {
notify,
updateNotification
};
}
export default connect(mapStateToProps)(Index);
It'd be nice to see redux live in action in the dev-tools of your demo site. :)
Using redux dev tools I can see that addnotification thunk is adding each notification to the store, however I dont see any notification render on the page.
Reapop version: 1.1.4
React version: 15.6.1
Redux version: 3.7.1
Hi,
Is it possible to display the closeButton when using at least one custom button?
According to the source I don't think it is but I might be wrong. If not would it be possible to add this feature?
I'm using a custom button as a redirect to a help page, that means I have to add another custom button in order to dismiss the notification. I guess that's fine. The problem is when I already have 2 custom buttons, i cannot add a third one as it doesn't display well.
Thank you.
I think i've seen that on Binance or Kraken :)
Thanks for your great work on this project.
Just wanted to let you know that GPL licensing makes it impossible to use in a lot of circumstances where the source can not be disclosed - which it wouldn't if it was MIT. Is this intended?
Hi again! Setting IDs works exactly as I needed it to!
But I found out that propTypes prohibit setting string IDs. For the time being I'm just hashing strings to ints, but this would be a minuscule change in the code
Hi,
I really like your module. Sadly it doesn't run out of the box if the complete redux store is based on Immutable.js.
In my case the complete store is immutable. Adding your reducer at top level makes it a key of a Immutable.Map . So changing line 130 in NotificationsSystem.js to notifications: state.get('notifications')
should do the trick. Because you get back a plain JS Object, since your initial state is empty.
Hi
I am using React with server side rendering, i understand there is no window object on SSR but is there a workaround to calculate the window only when elements are rendered?
the error is in node_modules\reapop\lib\components\NotificationsSystem.js:51:20
thanks!
When I call the method notify
, I get an error: TypeError: Object(...) is not a function
I want to call a method notify
when executing my action. Followed by the instructions, but for some reason nothing happens.
action.js
import { notify } from 'reapop';
export const fetchSelectVariant = (type, id, variant, callback) => dispatch => {
dispatch(
notify({
title: 'Upload status',
message: 'Your file is uploading...',
status: 'info'
}),
);
};
warning reapop > [email protected]: This package is deprecated and will no longer work with React 16+. We recommend you use CSSTransitionGroup from 'react-transition-group' instead.
I don't see any pop up messages.
The console.log shows that the code has been reached and is run.
Where should I look? How do I know why the popup is not showing up?
See the message in a popup.
Click on the PUSH HERE button, with the following setup:
// ...
import { reducer as notificationsReducer } from 'reapop';
// ...
// ...
export const rootReducer = combineReducers({
notifications: notificationsReducer(),
auth: authReducer,
user: userReducer,
// ...
// ...
});
export function createReduxStore(initialState = {}) {
const sagaMiddleware = createSagaMiddleware();
const middleware = [
sagaMiddleware,
thunk
];
const store = createStore(
rootReducer,
composeWithDevTools(
applyMiddleware(...middleware),
// ...
// ...
)
);
sagaMiddleware.run(rootSaga);
return store;
}
import React, { PureComponent } from 'react';
import Modal from 'react-modal';
import { addNotification as notify } from 'reapop';
// ...
class MyClass extends PureComponent {
constructor(props) {
super(props);
this.state = {
someState: false
};
}
handlePushTheButton = (event) => {
notify({ message: 'Someone will get in touch with you shortly!', status: 200 });
console.log({ message: 'Someone will get in touch with you shortly!', status: 200 });
event.preventDefault();
this.setState({
someState: true
});
};
render() {
return (
<div>
<button onClick={event => this.handlePushTheButton(event)}>PUSH HERE</button>
</div>
);
}
}
Today when I ran yarn upgrade
got this at the beginning of installation
warning reapop > [email protected]: This package is deprecated and will no longer work with React 16+. We recommend you use CSSTransitionGroup from 'react-transition-group' instead.
Thanks
It would be better if all actions were pure. i.e. not dispatching any other action so that user can use the library without any middleware. or even when user is using some other middleware like redux-saga. even then they should be able to use the library
run yarn upgrade
now receive those warning.
Hi
Is there a way to dismiss all open notifications?
BTW, nice work!
Unfortunately default values are not working, It comes from the way you destructure it from props in https://github.com/LouisBarranqueiro/reapop/blob/master/src/components/NotificationsSystem.js#L76
when you destructure like this defaultValues
is undefined and it will fallback to the const defined at https://github.com/LouisBarranqueiro/reapop/blob/master/src/components/NotificationsSystem.js#L8-L15
React just released 16.x.x, so we all have errors like this
error "reapop#react@^0.14.0 || ^15.0.0" doesn't satisfy found match of "[email protected]"
error "reapop#react-transition-group#react@^15.0.0" doesn't satisfy found match of "[email protected]"
error "reapop#react-transition-group#react-dom@^15.0.0" doesn't satisfy found match of "[email protected]"
Very nice library. Love using it. Was wondering if it will also work with react native app using redux.
Hey
If you show first notification and after one second show another notification, then after first one hides - second one will instantly jump to position of first. Instantly. Doesn't it annoy you?
How about making it as smooth as here?
Took from react-notification
It's UI component, such small things matters :)
Icon does not work anymore under FontAwesome v5
, which uses svg
and js
instead of font
.
Please consider supporting FontAwesome v5
by react-fontawesome
.
reapop/test/utils/expectedComponents.js
Line 157 in 4414b04
While bundling the application, lodash gets included because of this line :)
On mobile devices, I have wanted to show notifications at the bottom of the screen (to avoid covering navigation), and it would be great to allow the implementation of this library to pick where their "mobile" positioning should be.
I currently implement this change by simply looking for a key of smallScreenPosition
from the provided theme
property which must be POSITIONS.top
or POSITIONS.bottom
. I have made this change by making a couple small changes to the source code of NotificationsSystem.js
:
Currently
static propTypes = { // line 8
notifications: React.PropTypes.array.isRequired,
theme: React.PropTypes.shape({
smallScreenMin: React.PropTypes.number.isRequired,
notificationsSystem: React.PropTypes.shape({
className: React.PropTypes.string
})
}).isRequired
};
Modified:
static propTypes = {
notifications: React.PropTypes.array.isRequired,
theme: React.PropTypes.shape({
smallScreenMin: React.PropTypes.number.isRequired,
smallScreenPosition: React.PropTypes.oneOf([
POSITIONS.top,
POSITIONS.bottom
]), // not marked as required to allow for backwards compatibility
notificationsSystem: React.PropTypes.shape({
className: React.PropTypes.string
})
}).isRequired
};
Then I simply apply this property (if it exists) when rendering the Notification system for small screens:
Currently:
if (windowWidth < theme.smallScreenMin) { // line 67
return (
<NotificationsContainer
key='t'
position='t'
theme={theme}
notifications={notifications}
/>
);
}
Modified:
if (windowWidth < theme.smallScreenMin) {
return (
<NotificationsContainer
key={this.props.theme.smallScreenPosition || POSITIONS.top}
position={this.props.theme.smallScreenPosition || POSITIONS.top}
theme={theme}
notifications={notifications}
/>
);
}
When I initialize the NotificationsSystem, I simply provide this property (as the current version of the theme does not include this new property):
<NotificationsSystem theme={Object.assign(theme, {
smallScreenPosition: POSITIONS.bottom
})}/>
In conclusion, this change simply would allow the implementation to dictate this functionality with no drawbacks. I'm happy to answer questions, if there are any.
Been implementing your notification solution which is great however I have stumbled upon the situation where I would like the notification to appear unless the user has actively dismissed it, however, I would like to keep bringing it up if the user hasn't dismissed it previously.
Would this be something that you could add, I was thinking something along the lines of
hideNotification(notificationId)
Idea for improvement.
Don't prefix icons with 'fa '. this would allow other icon lib's to be used.
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.