react-redux-flash v1.0.4

react-redux-flash

react-redux-flash aims to provide a simple, flexible and easy-to-use framework for using flash messages within your react applications. react-redux-flash uses Redux as it's global message store, thus basic understanding of Redux is required. Click here to learn more about the Redux state management library.

Installation

npm install --save-dev react-redux-flash

This library marks the following libraries as peer dependencies that your application must have installed:

• react@16.11.0 or higher
• react-dom@16.11.0 or higher
• react-redux@7.1.3 or higher
• redux@4.0.4 or higher

Usage

You can setup the component in three simple steps:

1. Register the reducer with your Redux store
2. Include the <Flash /> component in your component where flash messages need to appear
3. Use the flash functions to display and remove flash messages

And that's it!

Step 1: Register the state reducer

For your store to be able to handle the actions dispatched by this library, you'll need to register the flashReducer with your store.

import { createStore, combineReducers } from "redux";
import { flashReducer } from "react-redux-flash";

const rootReducer = combineReducers({
    // You must to pass flashReducer under 'flash' key
    flash: flashReducer
    // ...your other reducers here
});

const store = createStore(rootReducer);

Step 2: Use the Flash component

Now that our reducer is setup, we can use the <Flash /> component to display our flash messages.

import React from "react";
import { Flash } from "react-redux-flash";

export default function() {
    return (
        <div id="home">
            ...
            <Flash useBackdrop />
            // The "useBackdrop" makes the flash background darker ...
        </div>
    );
}

Step 3: Dispatch flash messages

Now we have our reducer setup and a page of our application using the <Flash /> component. Now we are ready to display flash messages. There are a number of ways to dispatch for flash messages. These are described below:

- flash (level, message, duration, persist)

This is the primary function to display a the flash message.

• level is a string which indicates the severity of the message and controls the appearance of the flash message. The supported values are info, success, warning and error.
• message is the string which is displayed in the flash message
• duration is the time in milliseconds for which a flash is displayed. When this time elapses, the message is dismissed. The default is 5000ms (5s).
• persist is a boolean that indicates if a flash message should be automatically dismissed. If set to true, the flash message can only be dismissed by the user manually clicking the close button on the message. The default is false.

- flashInfo (message, duration, persist)

Convenient extension of the flash function to display information flash messages.

- flashSuccess (message, duration, persist)

Convenient extension of the flash function to display success flash messages.

- flashWarning (message, duration, persist)

Convenient extension of the flash function to display warning messages.

- flashError (message, duration, persist)

Convenient extension of the flash function to display error messages.

- clearFlash ()

Clears all flash messages from the store.

The snippet below illustrates the use of the flash functions:

import React from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { Flash, flashInfo, clearFlash } from "react-redux-flash";

const MyComponent = ({ addFlash, clearFlash }) => {
    return (
        <div id="home">
            ...
            <Flash />
            ...
            <button onClick={() => addFlash("This is a flash message", 2500)}>Display info flash message for 2.5 seconds</button>
            <button onClick={() => clearFlash()}>Clear all flash messages</button>
            ...
        </div>
    );
};

Homepage.propTypes = {
    addFlash: PropTypes.func,
    clearFlash: PropTypes.func
};

export default connect(
    null,
    { addFlash, clearFlash }
)(MyComponent);

Testing - Storybook

This package is visually tested with Storybook. You can view the stories online, using this link.

To view the stories in development, run npm run storybook. When finished, a new browser window will be opened where you can test the flash component with a nice little control panel.

Contributors

• Kwame Opare Asiedu

Support

The author of this library is on a mission to promote high-quality open-source software. If you'd like to support, you can do so via my Patreon page.

Changelog

• 1.0.2
  • Updated README