Re-alert NPM | npm.io

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, include thunk middleware when creating store.

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