re-alert

0.3.0 • Public • Published

re-alert

Build Status Coverage Status npm version devDependency Status devDependency Status

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

Package Sidebar

Install

npm i re-alert

Weekly Downloads

1

Version

0.3.0

License

MIT

Last publish

Collaborators

  • zesik