Skip to content
⚡️ A redux reducer and a set of actions to implement flash messages in a redux application
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.eslintrc.js
.gitignore
.node-version
.prettierignore
.prettierrc
.travis.yml
LICENSE
README.md
package.json
webpack.config.js
yarn.lock

README.md

flash-messages Build Status codecov

A redux reducer and a set of actions to implement flash messages in a redux application.

Note: this library provides only the data layer. In order to display the messages in your frontend, you must read the current messages from the corresponding reducer.

Work In Progress Warning

The public interface of this project is being actively developed. It is, therefore, still evolving and subject to sudden change. Wait until version 1.0.0 if you want to enjoy a stable API.

Installing

npm install @zooppa/flash-messages

or

yarn add @zooppa/flash-messages

Running tests

  • yarn run test:single (single test run with coverage)
  • yarn run test (watch)

Building

  • yarn run build

Using

Adding the reducer to your root reducer:

// reducers/rootReducer.js
import { combineReducers } from 'redux';
import { flashMessagesReducer as flashMessages } from '@zooppa/flash-messages';

export default combineReducers({
  flashMessages
});

Dispatching a message:

// your component
import { receiveFlashMessage } from '@zooppa/flash-messages';

store.dispatch(receiveFlashMessage({
  type: 'success', // ['success', 'warning', 'error', ...]
  text: 'my text'
}));

Dispatching a timed message:

import { receiveTimedFlashMessage } from '@zooppa/flash-messages';

store.dispatch(receiveTimedFlashMessage({
  type: 'success',
  text: 'this message will disappear in 3000 ms'
}, {          // optional config object
  time: 3000  // default: 3000
}))

Contributing

  • Use eslint in your editor with the provided eslintrc.js config.
  • Use prettifier as a code formatter (included in devDependencies).
  • Respect the coverage thresholds.
  • Use common sense.
You can’t perform that action at this time.