@opuscapita/react-alerts

react-alerts

Description

React alerts component to show global notifications.

Installation

npm install @opuscapita/react-alerts

Demo

View the DEMO

Builds

UMD

The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.

CommonJS/ES Module

You need to configure your module loader to use cjs or es fields of the package.json to use these module types. Also you need to configure sass loader, since all the styles are in sass format.

• With webpack use resolve.mainFields to configure the module type.
• Add SASS loader to support importing of SASS styles.

API

OCAlertsProvider

Prop name	Type	Default	Description
containerStyle	object	{ bottom: '5px', maxWidth: '650px' }	Override container default CSS styles

OCAlerts

Prop name	Type	Default	Description
containerStyle	object	{ bottom: '5px', maxWidth: '650px' }	Override container default CSS styles

OCAlert

Function	Parameters	Returns	Description
alertSuccess	message, options, onDismiss	Alert Id: number	Show success alert
alertInfo	message, options, onDismiss	Alert Id: number	Show info alert
alertWarning	message, options, onDismiss	Alert Id: number	Show warning alert
alertError	message, options, onDismiss	Alert Id: number	Show error alert
closeAlert	id		Close one alert with id
closeAlerts			Close all alerts

Options

Attributes	Description
timeOut	Time in milliseconds in which the alert is closed automatically.

Code example

Simple usage with built-in Redux store

Include the OCAlertsProvider component somewhere in your main component once.

import { OCAlertsProvider } from '@opuscapita/react-alerts';

<div id="myApp">
  <OCAlertsProvider />
</div>

Use alerts anywhere in your application.

import { OCAlert } from '@opuscapita/react-alerts';

// Message can be text or an react element
OCAlert.alertSuccess('The operation was success!');
OCAlert.alertInfo('Click the button to continue.');
OCAlert.alertWarning('Make sure you save the changes before leaving.');
OCAlert.alertError('Something went wrong.');
OCAlert.alertSuccess(<FormattedMessage id="AlertSuccess" />);
// Alerts can have custom timeout, after which the alert is closed
OCAlert.alertInfo('Alert will disappear in 3 seconds', { timeOut: 3000 });

OCAlert.closeAlert(id);
OCAlert.closeAlerts();

Usage with your own Redux store

Instead of using react-alerts' built-in Redux store, you can also use your own store. Like this:

import { OCAlert } from '@opuscapita/react-alerts';
OCAlert.setStore(yourStore)

After this you need to include OCAlerts component somewhere in your application (Note that we're not using the OCAlertsProvider like we did in the previous example)

import { OCAlerts } from '@opuscapita/react-alerts';

// ...

<div className="my-react-application">
  {this.props.children}
  <OCAlerts />
</div>

And lastly, you need to import and initialize the alertsReducer:

import { alertsReducer } from '@opuscapita/react-alerts';
import { combineReducers } from 'redux';

const combinedReducers = {
  // your reducers
  alerts: alertsReducer,
}