React alerts component to show global notifications.
npm install @opuscapita/react-alerts
View the DEMO
The default build with compiled styles in the .js file. Also minified version available in the lib/umd directory.
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.
| Prop name | Type | Default | Description |
|---|---|---|---|
| containerStyle | object | { bottom: '5px', maxWidth: '650px' } | Override container default CSS styles |
| Prop name | Type | Default | Description |
|---|---|---|---|
| containerStyle | object | { bottom: '5px', maxWidth: '650px' } | Override container default CSS styles |
| 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 |
| Attributes | Description |
|---|---|
| timeOut | Time in milliseconds in which the alert is closed automatically. |
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();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,
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent