https://github.com/chrispenner/wisp-react-redux
A Toast/Notification Library that integrates seamlessly with React and Redux.
https://github.com/chrispenner/wisp-react-redux
Last synced: about 2 months ago
JSON representation
A Toast/Notification Library that integrates seamlessly with React and Redux.
- Host: GitHub
- URL: https://github.com/chrispenner/wisp-react-redux
- Owner: ChrisPenner
- License: mit
- Created: 2016-11-03T01:13:27.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2016-11-17T16:53:57.000Z (over 8 years ago)
- Last Synced: 2025-03-30T22:01:34.204Z (2 months ago)
- Language: JavaScript
- Size: 54.7 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Wisp
A Toast/Notification Library that integrates seamlessly with React and Redux.
Success:
Failure:
## What is it
It's a toast-style notification system that works well with the rest of your react-redux app.
You display notifications by dispatching actions.
## Setup
Wisp requires the following dependencies to be installed:
- `react`
- `react-redux`
- `react-addons-css-transition-group`
Add the `Wisps` component to your app so it's rendered on every page (the actual location in the page doesn't matter).
```javascript
import { Wisps } from 'wisp-react-redux'
const App = () => {
return (
...Rest of the app
)
}
```
Add the `wispReducer` to your app's root reducer under the `wisps` key.
```javascript
import { wispReducer } from 'wisp-react-redux'
import { combineReducers } from 'redux'
export default combineReducers({
wisps: wispReducer,
/*...other reducers */
})
```
Also ensure that the
Now you can trigger notifications by dispatching actions! There are some action creators built in:
- successWisp
- errorWisp
- wisp
These take an options object as their only parameter:
```javascript
{
[optional] title,
[optional] message,
[optional] customClass,
}
```
For example:
```javascript
successWisp({title: "Success!", message: "Document Saved"})
```
## Customization
You can customize the styling of your notifications by passing specific configuration props.
- `customClass`: