Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/posabsolute/redux-flash-notification
An es6 growl notification plugin for redux
https://github.com/posabsolute/redux-flash-notification
growler javascript notification-plugin notifications react redux
Last synced: 9 days ago
JSON representation
An es6 growl notification plugin for redux
- Host: GitHub
- URL: https://github.com/posabsolute/redux-flash-notification
- Owner: posabsolute
- License: mit
- Created: 2015-12-15T13:45:30.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-05-09T13:43:49.000Z (over 7 years ago)
- Last Synced: 2024-10-15T08:36:06.041Z (23 days ago)
- Topics: growler, javascript, notification-plugin, notifications, react, redux
- Language: JavaScript
- Homepage:
- Size: 24.4 KB
- Stars: 53
- Watchers: 5
- Forks: 12
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Redux Flash Notification Component for Redux
An es6 growl-like notification plugin for react and redux.
Demo: [Live Example](http://posabsolute.github.io/redux-flash-notification-example/) | [Source](https://github.com/posabsolute/redux-flash-notification-example)
Better Documentation: [http://posabsolute.github.io/redux-flash-notification](http://posabsolute.github.io/redux-flash-notification)
## Integration
1 npm install 'flash-notification-react-redux' --save
2 Add redux-thunk middleware
```
npm install 'redux-thunk' --save
```
```javascript
import reduxThunk from 'redux-thunk'
const createStoreWithMiddleware = applyMiddleware(reduxThunk)(createStore);
const store = createStoreWithMiddleware()
```
3 Add the reducer to your root reducer
```javascript
import { GrowlerReducer } from 'flash-notification-react-redux';
const rootReducer = combineReducers({
growler: GrowlerReducer,
});
export default rootReducer;
```
4 Add the growler component to your app root component so it is always accessible
```javascript
import { GrowlerContainer } from 'flash-notification-react-redux';
export class App extends Component {
static propTypes = {
children: React.PropTypes.any,
}
render() {
return (
{this.props.children}
);
}
}
```
5 Add webpack loaders to load es6 files.
```javascript
module: {
loaders: [{
test:[/\.jsx$/, /\.js$/],
loader: 'babel',
query: {
plugins: ['transform-decorators-legacy']
},
include: [
path.resolve(__dirname, "src"),
path.resolve(__dirname, "node_modules/flash-notification-react-redux")
],
}, {
test: [/\.scss$/, /\.css$/],
loader: 'css?localIdentName=[path]!postcss-loader!sass',
}],
},
};
```
6 You're done.
## Usage
### With the reducer
You can change the store state to show the growler.
Example:
```javascript
dispatch({
type: 'GROWLER__SHOW',
growler: {
text: 'Please enter your JIRA url',
type: 'growler--error',
},
});
```
```javascript
dispatch({
type: 'GROWLER__SHOW',
growler: {
text: 'You have succesfully logged in',
type: 'growler--success',
},
});
```
### With the actions
If made available in your components, you can use multiple actions to show the growler component,
Example:
```javascript
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import {GrowlerActions} from 'actions/sprints.action';
const mapStateToProps = state => ({});
const mapDispatchToProps = dispatch => {
return {
...bindActionCreators(growlerActions, dispatch),
};
};
@connect(mapStateToProps, mapDispatchToProps)
export default class SprintsListContainer extends React.Component {
render() {
return ;
}
}
```
### Available Actions
### showGrowlerSuccess(text)
### showGrowlerError(text)
### showGrowler(text, type)
Used when you want to show custom messages. The type will be added as a CSS class.
## Options
Options are passed down when you add the component to your app root.
| Option | Default Value | Default Value | Description |
| ------------- | ----------- | ----------- | ----------- |
| shownFor | 3000| Milliseconds | Time the growler is shown |
| messages | - | Object | Localization in every supported languages of your messages |
| currentLocale | enUS | String | Locale used to retrieve messages |
```javascript
import { GrowlerContainer } from 'flash-notification-react-redux';
import growlerMessages from 'locales/growler.locale.js';
export class App extends Component {
render() {
return (
{this.props.children}
);
}
}
```
### Messages
By default the growler will show the text passed down by the action, however when mounting the component you can specify localized text. When shown, the component will verify if the text passed match a key.
```javascript
import { GrowlerContainer } from 'flash-notification-react-redux';
import growlerMessages from 'locales/growler.locale.js';
// usage in render
```
#### currentLocale (default: enUS)
You can specify the language used by using the currentLocale option.
#### Messages object Example
```javascript
{
enUS: {
error: 'There was en error'
},
frCA:
error: 'Il y a eu une erreur'
}
```
### shownFor (default: 3000)
Time the growler is shown in milliseconds
```javascript
```
## Limitations
This component is based on the use of redux, react, es6 & es7 (decorators) and webpack for loading the css as an import module.