Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/42bv/redux-flash-messages
Library for storing flash messages in redux.
https://github.com/42bv/redux-flash-messages
flash-messages react redux
Last synced: 1 day ago
JSON representation
Library for storing flash messages in redux.
- Host: GitHub
- URL: https://github.com/42bv/redux-flash-messages
- Owner: 42BV
- License: other
- Created: 2017-04-04T11:20:47.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-04-17T08:16:20.000Z (over 5 years ago)
- Last Synced: 2024-09-21T21:49:06.583Z (about 2 months ago)
- Topics: flash-messages, react, redux
- Language: TypeScript
- Size: 64.5 KB
- Stars: 8
- Watchers: 11
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# About
[](https://travis-ci.org/42BV/redux-flash-messages)
[](https://codecov.io/gh/42BV/redux-flash-messages)
This library makes it easy to create flash messages and to store them in a Redux store.
What makes this project a little different from most flash message libraries is that it is UI agnostic. This library does not render the FlashMessages for you it only stores them!
# Installation
`npm install redux-flash-messages --save`
# Getting started.
We assume you have a working Redux project, if you do not yet have Redux add Redux to your project by following the Redux's instructions.
First install the following dependencies in the package.json:
1. "react-redux": "5.0.3",
2. "redux": "3.6.0",
Now add the flash-message-reducer to your rootReducer for example:
```js
import { combineReducers } from 'redux';
import { flashMessage, FlashMessageStore } from 'redux-flash-messages';
export interface Store {
flashMessage: FlashMessageStore;
}
// Use ES6 object literal shorthand syntax to define the object shape
const rootReducer = combineReducers({
flashMessage
});
export default rootReducer;
```
This should add the FlashMessageStore to Redux, which will store
the flash messages.
Next you have to configure the flashMessages module:
```js
import { createStore } from 'redux';
import { configureFlashMessages } from 'redux-flash-messages';
export const store = createStore(
rootReducer,
);
configureFlashMessages({
// The dispatch function for the Redux store.
dispatch: store.dispatch
});
```
The redux-flash-messages module must be configured before the application is rendered.
# Rendering flash messages
Next we need to render the flash messages from the Redux store. How you do this is entirely up to you, but here is a small example:
```js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Store, Dispatch } from 'redux';
import { removeFlashMessage, FlashMessage as FlashMessageShape } from 'redux-flash-messages';
import './FlashMessage.css';
interface Props {
messages: Array;
dispatch: Dispatch;
}
export class FlashMessage extends Component {
onFlashMessageClick(flashMessage: FlashMessageShape) {
/*
Make sure the onClick is called when a user clicks
on the flash message.
Otherwise callbacks on Flash Messages will not work.
*/
flashMessage.onClick(flashMessage);
// This implementation deletes the flash message when it is clicked.
this.props.dispatch(removeFlashMessage(flashMessage.id));
}
render() {
const messages = this.props.messages;
return (
{ messages.map((message) => this.renderMessage(message))}
);
}
/*
This renders a rather simple flash message.
But you could and should use the 'type' property to
render the flash message in a different style for each 'type'.
*/
renderMessage(message: FlashMessageShape) {
return (
this.onFlashMessageClick(message) }
>
{ message.text }
);
}
}
export default connect((store: Store) => {
return {
messages: store.flashMessage.messages
};
})(FlashMessage);
```
Where the contents of 'FlashMessage.css' is:
```css
.flash-message {
position: absolute;
width: 100%;
height: 50px;
text-align: center;
z-index: 9000;
background-color: white;
border: black solid 2px;
padding: 12.5px 0;
}
```
# Sending flash messages
Now that we can see the flash messages we can use the following convenience methods to send flash messages:
```js
import { addError, addWarning, addSuccess, addInfo, addApocalypse } from 'redux-flash-messages';
// Renders a message for 10000 milliseconds
addError({ text: 'Epic error', data: { age: 12 }, onClick: (flashMessage) => {
console.log('I was clicked');
console.log(flashMessage);
}});
// Renders a message for 7000 milliseconds
addWarning({ text: 'Epic warning', data: { tree: 'house' }, onClick: (flashMessage) => {
console.log('I was clicked');
console.log(flashMessage);
}});
// Renders a message for 2000 milliseconds
addSuccess({ text: 'Epic success', data: { win: true }, onClick: (flashMessage) => {
console.log('I was clicked');
console.log(flashMessage);
}});
// Renders a message for 5000 milliseconds
addInfo({ text: 'Epic info', data: { yo: 'man' }, onClick: (flashMessage) => {
console.log('I was clicked');
console.log(flashMessage);
}});
// Renders a message which is not automatically removed
addApocalypse({ text: 'TOTAL ANNIHILATION', data: { fail: true }, onClick: (flashMessage) => {
console.log('I was clicked');
console.log(flashMessage);
}});
```
The `onClick` and the `data` keys are optional. The `data`
key can be used to send whatever `data` you want to the
component which renders the flash message.
# Creating a custom flash message type.
If the default types are not enough you can always create your own flash message creator:
You do this by calling `addFlashMessageOfType` manually.
```js
import { addFlashMessageOfType } from 'redux-flash-messages';
enum CustomTypes {
Notice = 'NOTICE',
}
export function addNotice({ text, onClick, data }: FlashMessageConfig) {
addFlashMessageOfType(CustomTypes.Notice, 1000, text, onClick, data);
}
```