react-redux-alerts
Description of component and any special notes
Usage
Install
yarn add @salocreative/react-redux-alerts
Include the Alerts component at the top of the component it's required in.
import { Alerts } from '@salocreative/react-redux-alerts';
Implement as follows
<Alerts alerts={ this.props.systemAlerts } />
In order to make sure the alerts are in your state you need to include the system alerts reducer into your combine reducer function.
in your reducer index include:
import { systemAlerts } from '@salocreative/react-redux-alerts';
and add to your combine reducer function. Next make sure that systemAlerts is mapped to props and connected to your component
ADD ALERTS
You can add alerts either via the API_FAILURE or ADD_ALERT action types. Both of these should be imported from this package. Although functionality is currently the same they are deliberately seperated for future development.
Both actions need to be dispatched with a payload as below:
return {
type: API_FAILURE,
payload: {
errorMessage: {
type: 'error',
message: 'My failure message goes here'
}
}
};
or ADD_ALERT as per:
return {
type: ADD_ALERT,
payload: {
message: {
type: 'success',
message: 'My alert message goes here'
}
}
};
Setting alert timeout
The alerts will automatically remove themselves after 5 seconds. You can customise this in the payload by setting an additional key in the message of time (this is in seconds). eg.
return {
type: ADD_ALERT,
payload: {
message: {
type: 'success',
message: 'My alert message goes here',
time: 20
}
}
};
Remove Alerts
Currently alerts timeout after 5s and are removed from state. It is possible to manually remove all alerts from state via the following action types
return {
type: CLEAR_ALL_SYSTEM_ALERTS
};
Further Development
- [ ] Add ability to set dismissable true/false
- [x] Ability to set timeouts per alert
- [x] Improve documentation
LICENSE
MIT