https://github.com/activ8-developers/react-redux-flash-message
UI agnostic library that makes easy to create flash messages and to store them in a Redux store.
https://github.com/activ8-developers/react-redux-flash-message
flash-messages javascript react-redux redux
Last synced: about 1 month ago
JSON representation
UI agnostic library that makes easy to create flash messages and to store them in a Redux store.
- Host: GitHub
- URL: https://github.com/activ8-developers/react-redux-flash-message
- Owner: ACTIV8-Developers
- Created: 2020-03-08T17:27:48.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-11T11:13:50.000Z (over 4 years ago)
- Last Synced: 2025-03-18T13:53:18.066Z (2 months ago)
- Topics: flash-messages, javascript, react-redux, redux
- Language: JavaScript
- Homepage:
- Size: 1.95 KB
- Stars: 2
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# About
This is UI agnostic library that makes easy to create flash messages and to store them in a Redux store. This library does not render the FlashMessages for you it only stores them!
# Installation
`npm install simple-redux-flash-message --save`
# Getting started.
First add the following dependencies in the package.json (if present skip this step):
- "react-redux": "^6.0.1"
- "redux": "^4.0.4"
Now add the flash-message-reducer to your rootReducer, for example:
```javascript
import { combineReducers } from 'redux';
import { flashMessageReducer } from 'simple-redux-flash-message';
const rootReducer = combineReducers({
flashMessage: flashMessageReducer
});
export default rootReducer;
```
# Sending flash messages
Now that we can see the flash messages we can use the following convenience methods to send flash messages:
```javascript
import { publishFlashMessage } from 'simple-redux-flash-message';
const {dispatch} = this.props;
// Redux dispatch method
// Message text
// Number of miliseconds messages will be displayed
// On click callback
// Custom data passed to message
publishFlashMessage(dispatch, "This is message content", 5000, () => console.log("Message clicked!"), {"message-type": "warning"})
```
# Rendering flash messages
Put following component somewhere in app root and pass messages prop from redux store.
```javascript
import React, { Component } from 'react';
export class FlashMessage extends Component {
renderMessage(message) {
return (
message.onClick()}
>
Close
message.onClick()}>
{message.text}
);
}
render() {
const { messages } = this.props;
return (
{messages.map((message) => this.renderMessage(message))}
);
}
}
export default FlashMessage;
```