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

react-redux-ui-state

v1.1.2

Published

React higher order component to provide UI state for components.

Downloads

334

Readme

Truly painless UI state for components.

Install

npm i react-redux-ui-state -S
yarn add react-redux-ui-state

Goals of this library

  • Make it easy to have component state in Redux
  • Make it possible to have "internal" state with or without using classes
  • Reduce Redux boilerplate for properties like UI flags
  • Easily allow multiple instances of the same component to get their own unique state
  • Get the benefits of Redux without most of the work for UI state

How it works

  • Create a config object with an optional name property and a function (which gets passed props) which returns a state object consisting of your initial state.
  • Wrap your component in the HOC.
  • An action gets dispatched like UI_STATE_ADD:some-component_<uuid> on componentWillMount
  • The initial state gets added to a uiState slice of the store with the name/state.
  • Call setUiState with a new state object.
  • An action gets dispatched like UI_STATE_SET:some-component_<uuid>
  • Component state gets removed from store on componentWillUnmount (optional)

setUiState: Simple update function that accepts an object that will be shallow merged with current state. Accepts an optional callback called with the state change.

resetUiState: Function to reset component to initial state. Accepts an optional callback called with the initial state.

uiState Options

name {String | Function}

If a string is provided a uuid will be suffixed in order not to overwrite the state in the store. Providing a function gives you the ability to create your own unique name, with the ability to use the component's props, e.g:

const uiStateConfig = {
    ...
    name: props => `MyComponent__${props.className}`,
    ...
};

state {Function}

Extend the wrapper component's props, e.g.

const uiStateConfig = {
    ...
    state: (props) => ({
        uiProp: 'uiProp',
        uiActive: props.active,
    }),
    ...
};

persist {Boolean}

Defaults to false. If true the component's state will not be removed from the uiState domain.

const uiStateConfig = {
    ...
    persist: true,
    ...
};

Usage:

// rootReducer.js
import { combineReducers } from 'redux';
import { uiStateReducer } from 'react-redux-ui-state';

export default function createRootReducer (reducers) {
    return combineReducers({
        ...reducers,
        uiState: uiStateReducer,
    });
}

// someComponent.js
import React from 'react';
import { uiState } from 'react-redux-ui-state';

export function someComponent ({
    someUiFlag,
    somePassedThing,
    resetUiState,
    setUiState,
    uiStateName,
}) {
    return (
        <button onClick={() => setUiState({
                    someUiFlag: !someUiFlag
                },
                updatedState => console.log(updatedState),
            )}>
            Toggle flag for {uiStateName}
        </button>

        <button
            onClick={() =>
                resetUiState(resetState => console.log(resetState))}
        >
            reset state
        </button>
    );
}

const uiStateConfig = {
    name: 'some-component',
    persist: true, // optional
    state: (props) => ({
        someUiFlag: false,
        somePassedThing: props.x ? props.x : null;
    }),
};

export default uiState(uiStateConfig)(someComponent);

Example app

There is a simple example app made with create-react-app in the ./example folder. Simple cd into that directory, yarn install && yarn start. You can edit the App.js file to add more instances of the Button and Text components.

App screenshot

Feel free to open a PR!