@opuscapita/react-alerts

OpusCapita react alerts component

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
22Nov 25, 2019Sep 6, 2017Minified + gzip package size for @opuscapita/react-alerts in KB

Readme

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.

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,
}

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.