0.8.0 • Published 9 years ago
react-alerts-service v0.8.0
##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'} />