@juice789/redux-saga-notifications
v1.1.3
Published
redux saga notification component
Downloads
5
Maintainers
Readme
Redux-Saga-Notifications
A simple React notification component. Features:
✅ Reducer + Saga included
✅ Custom styles
✅ Styled components theme support
✅ Button controls to confirm a notification (optional) + action forwarding
Installation
npm install @juice789/redux-saga-notifications
Demo
Open demo
Usage
See example app in demo/src folder
import {
notificationSaga,
notificationReducer
} from '@juice789/redux-saga-notifications'
//add the saga inside rootSaga
//add the reducer in the rootReducer
import Notifications from '@juice789/redux-saga-notifications'
const App = () => (
<>
<div>Include the Notifications component in your app</div>
<Notifications />
</>
)
Props
| name | type | description | | ------ | ------ | ------------------------ | | styles | object | (optional) custom styles | | icons | object | (optional) custom icons |
Dispatching a notification
store.dispatch({
type: 'NOTIFICATION_PUSH',
notification: {
id: Date.now(),
type: 'success',
label: 'Test notification 1',
duration: 10000
}
})
Dispatching a notification with button controls
store.dispatch({
type: 'NOTIFICATION_PUSH',
notification: {
id: Date.now(),
type: 'error',
label: 'Test notification 2',
buttons: 'ok' //valid options: 'yesNo' or 'ok'
}
})
Forwarding a custom action after the notification is confirmed
store.dispatch({
type: 'NOTIFICATION_PUSH',
notification: {
id: Date.now(),
type: 'info',
label: 'Test notification 3',
payload: {
type: 'NOTIFICATION_WAS_CONFIRMED',
foo: 'bar'
},
buttons: 'yesNo' //after the yes button is clicked, the payload is dispatched
}
})
The properties of the notification object:
| name | type | description | | -------------- | --------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | | id | id | Unique notification ID | | type | string | Notification type. Choose from 3 built-in notification types: 'success', 'info', 'error' or create a custom type by declaring it in the styles prop | | label | string | Notification label | | duration | number | (optional) Notification display duration in milliseconds (default 5000) | | buttons | string | (optional) Show button controls under the notification. Options: 'yesNo', 'ok' | | payload | Redux action | (optional) Action to be forwarded after confirming the notification (only if the buttons property is set to 'yesNo' or 'ok') | | blocking | boolean | (optional) Show an overlay behind the notification | | resolveActions | array of Redux action types | (optional) The notification will be active until any of the action types are dispatched, ignoring the duration property |
Complete styling example
import Notifications, {
createNotificationStyle
} from '@juice789/redux-saga-notifications'
const styles = {
container: (defaults) => ({
...defaults,
alignItems: 'flex-end'
}),
containerInner: (defaults) => ({
...defaults,
bottom: '45px'
}),
overlay: (defaults) => ({
...defaults,
background: 'darkgray'
}),
//add a custom notification type and style it with createNotificationStyle
customStyle1: createNotificationStyle('purple', 'fuchsia', true),//returns a complete notification style object, just set the colors
//or set every style property manually
customStyle2: {
notification: (defaults) => ({
...defaults,
background: 'burlywood'
}),
notificationInner: (defaults) => ({
...defaults,
minHeight: '100px'
}),
icon: (defaults) => ({
...defaults,
fontSize: '40px',
}),
label: (defaults) => ({
...defaults,
color: 'brown'
}),
buttonsOuter: (defaults) => ({
...defaults,
background: 'red'
}),
button: (defaults) => ({
...defaults,
fontSize: '20px'
})
},
//overriding the default 'error' notification type
error: {
...createNotificationStyle(
'red', //primary color
'blue', //secondary color
true //set to false to disable animations
),
label: (defaults) => ({
...defaults,
color: 'black',
fontSize: '20px'
})
}
}
const icons = {
customStyle1: <>🐼</>,
customStyle2: <>🥒</>,
success: null, //don't use icon for success notification type,
error: <FontAwesomeIcon icon={faAmbulance} /> //use an icon from your favourite icon library (font awesome, line awesome etc.)
}
const App = () => <Notifications styles={styles} icons={icons} />
License
MIT