re-alert
v0.3.0
Published
A light-weight web page notification system for React and Redux
Downloads
9
Maintainers
Readme
re-alert
A light-weight web page notification system for React and Redux.
Dependencies
Re-alert depends on React and Redux. See package.json for more details.
Installation
$ npm install --save re-alert
Testing
To run tests, execute test
script with npm
.
$ npm run test
To run coverage tests, execute coverage
script with npm
.
$ npm run coverage
Integration
Include the reducer of notification system into your root reducer.
import { notificationReducer } from 're-alert'; const rootReducer = combineReducers({ ... notification: notificationReducer }); export default rootReducer;
Since re-alert uses Redux
thunk
middleware to create async operations, includethunk
middleware when creating store.import { createStore, applyMiddleware } from 'redux'; import thunkMiddleware from 'redux-thunk'; import rootReducer from './reducers'; export default function configureStore(initialState) { return createStore( rootReducer, initialState, applyMiddleware( thunkMiddleware ) ); }
Include the re-alert component into your application's JSX.
import NotificationSystem from 're-alert'; const App = props => ( <div> <NotificationSystem /> ... </div> );
To customize styles of notifications, include a custom class name for
NotificationSystem
.<NotificationSystem customClassName="custom-class" />
In CSS file, you can override original CSS with
#notification-container.custom-class
selector. Refer to the original stylesheet to see what you can override.To allow HTMLs in all notifications, set
dangerouslyAllowHTML
prop totrue
forNotificationSystem
.<NotificationSystem dangerouslyAllowHTML={true} />
Allowing HTML is risky as it may open your site to cross-site scripting (XSS) attack. Sanitize data before use it directly when allowing HTML.
Quick Example
You can show a success message in your action file like this.
import { showSuccess } from 're-alert';
export function updateProfile() {
return dispatch => {
...
dispatch(showSuccess('Your profile has been updated.', 5000));
};
}
Available Actions
showInformation(message, autoCloseDelay);
showSuccess(message, autoCloseDelay);
showWarning(message, autoCloseDelay);
showError(message, autoCloseDelay);
These functions display messages with different level, and accept same arguments:
message
- The message to display.autoCloseDelay
- Time before the notification automatically closes. Set to 0 to prevent notification to be closed automatically.
Release History
- 0.3.0
- Support HTML in notifications.
- 0.2.0
- NPM package now only contains minified JS.
- 0.1.0
- First proper release.