re-alert

A light-weight web page notification system for React and Redux.

Demo

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

1. Include the reducer of notification system into your root reducer.

   import { notificationReducer } from 're-alert';
   
   const rootReducer = combineReducers({
     ...
     notification: notificationReducer
   });
   
   export default rootReducer;

2. Since re-alert uses Redux thunk middleware to create async operations, include thunk 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
       )
     );
   }

3. 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 to true for NotificationSystem.

     <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.

License

MIT