react-alerts-service
v0.8.0
Published
React Alerts Service
Downloads
16
Maintainers
Readme
##React alerts service (ES6)
####Installation
npm i react-alerts-service --save
####MessagesHandler
Basic use example
import {MessagesHandler} from 'react-alerts-service';
<MessagesHandler />
Advanced use example
import {MessagesHandler} from 'react-alerts-service';
errorProps = {
wrapperClassName: 'ui negative message',
textClassName: 'header',
closeButtonClassName: 'close icon',
closeButtonContent: ''
};
warningProps = {
wrapperClassName: 'ui warning message',
textClassName: 'header',
closeButtonClassName: 'close icon',
closeButtonContent: ''
};
successProps = {
wrapperClassName: 'ui positive message',
textClassName: 'header',
closeButtonClassName: 'close icon',
closeButtonContent: ''
};
infoProps = {
wrapperClassName: 'ui info message',
textClassName: 'header',
closeButtonClassName: 'close icon',
closeButtonContent: ''
};
<MessagesHandler
animation={'rotate'}
storageType={'simpleStorage'}
wrapperClassName={'messages-wrapper'}
errorMessageProps={errorProps}
warningMessageProps={warningProps},
infoMessageProps={infoProps},
successMessageProps={successProps},
closeTime={5000},
/>
also You can use ready semanticUI or Bootstrap theme
import {MessagesHandlerSemantic} from 'react-alerts-service';
<MessagesHandlerSemantic />
import {MessagesHandlerBootstrap} from 'react-alerts-service';
<MessagesHandlerBootstrap />
####Actions
setErrorMessage(message, icon)
setWarningMessage(message, icon)
setInfoMessage(message, icon)
setSuccessMessage(message, icon)
simple example
import {actions} from 'react-alerts-service';
export const errorButton = () => (
<a onClick={() => actions.setErrorMessage('Some error message text')}>Error alert button</a>
);
export const warningButton = () => (
<a onClick={() => actions.setWarningMessage('Some error message text')}>Warning alert button</a>
);
export const infoButton = () => (
<a onClick={() => actions.setInfoMessage('Some error message text')}>Info alert button</a>
);
export const successButton = () => (
<a onClick={() => actions.setSuccessMessage('Some error message text')}>Success alert button</a>
);
####Storage
You can use localStorage or simpleStorage, simpleStorage is default if You want use localStorage You must set it on Actions and messages handler
import {Actions} from 'react-alerts-service';
const actions = new Actions('localStorage');
<MessagesHandlerBootstrap storageType={'localStorage'} />