npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

redux-flash

v2.0.9

Published

Redux action creators for displaying flash messages

Downloads

3,857

Readme

redux-flash

Redux action creators for displaying flash messages.

NPM version

This library provides a simple way to manage flash messages in Redux applications. It includes action creators for creating configurable flash messages as well as selectors for accessing those messages from anywhere in your application.

Migration guides

Example


import { applyMiddleware, createStore, combineReducers } from 'redux'
import {
    reducer as flashReducer,
    middleware as flashMiddleware,
    flashMessage,
    getFlashMessages,
} from 'redux-flash'

// First, include the flash reducer keyed under 'flash' in your root reducer

const reducer = combineReducers({
    flash: flashReducer
    ...
})

// Then, apply the flash middleware when creating the store

const store = createStore(reducer, {}, applyMiddleware(flashMiddleware()))

// Now you can dispatch flash actions

const action = flashMessage('This is a test message!')
store.dispatch(action)

// And access messages from the state

const state = store.getState()

getFlashMessages(state)
// =>
// [{
//    id: 1495649041702,
//    message: 'This is a test message!',
//    isError: false,
//    props: {}
// }]

API

Action creators

redux-flash exposes the following action creators:

  • flashMessage(message, options): Create a flash message with a given message string.
  • flashErrorMessage(message, options): Create a flash message with the isError option flag set to true.
  • flashSuccessMessage(message, options): An alias for flashMessage().
  • clearMessages(): Clear all flash messages.
  • removeMessage(messageID): Clear a particular flash message.

The options object passed to these action creators may contain the following attributes:

  • push: A flag indicating that only the new message should be shown. Internally calls clearMessages() before adding the new message.
  • isError: A flag indicating whether the message is an error message.
  • timeout: A timeout (ms) after which the message will be removed (default: 3000). If this value is false, the message will persist indefinitely.
  • props: Any additional values to pass to the message object.

Middleware

You can also modify the behavior of flash messages globally by passing options to the flash middleware:

const flashOptions = { timeout: 5000 }
const store = createStore(reducer, {}, applyMiddleware(flashMiddleware(flashOptions))))

The options object passed to the middleware may contain the following attributes:

  • timeout: A timeout (ms) after which the message will be removed (default: 3000).
  • props: Default props that will be merged with each message's props.

Selectors

redux-flash exposes the following state selectors:

  • getFlashMessages: Retrieves all flash messages from the state.
  • getSuccessMessages: Retrieves all flash messages from the state where isError: false.
  • getErrorMessages: Retrieves all flash messages from the state where isError: true.
  • getLatestMessage: Retrieves the last flash message that was added to the state.

Message objects returned by these selectors will have the following format:

{
   id: 1495649041702, // A unique ID
   message: 'This is a test message!', // The message text
   isError: false, // Whether the message is an error
   props: {} // Any additional values you passed in your action creator
}

A PropType for this object is exported from this module as flashMessageType.

Reducer

redux-flash exposes a reducer to handle the actions it creates. This reducer must be attached to your root reducer using the key flash in order for the library to function (see example).

Displaying messages in the view

redux-flash only handles the creation and storage of flash messages, and contains no display logic. Here's a simple example of how such logic could be implemented using react-redux:


import React from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { getLatestMessage, flashMessageType } from 'redux-flash'

function FlashMessages ({ flash }) {
    return (
        <div>
        {
            flash && <div>{ flash.message }</div>
        }
        </div>
    )
}

FlashMessages.propTypes = {
    flash: flashMessageType
}

function mapStateToProps (state) {
    return {
        flash: getLatestMessage(state)
    }
}

export default connect(mapStateToProps)(FlashMessage)