‚̧Napping Peanut Monsters

    react-pure-state

    1.0.2¬†‚Äʬ†Public¬†‚Äʬ†Published

    ūĚĆ™ react-pure-state

    Intuitive, unopinionated and lightweight global state manager for React

    • ‚ö° Zero dependencies and 2.3kB gzipped bundle means lightning fast performance
    • ūüďĚ Leverages the power of ES6 Proxy objects to allow safe and simple changes to state
    • ūüõ† Single provider and hook exports make for minimal learning curve
    • ūüĒć Intuitive selectors make preventing unnecessary rerendering easy
    • ūüôÖ‚Äć‚ôāÔłŹ Basic middleware adds support for validation, logging and more

    Get Started

    • yarn add react-pure-state

    Basic Example

    import { StateProvider, useRps } from 'react-pure-state';
     
    const Introduction = () => {
        // Read from the state with ease
        const { name } = useRps();
     
        return <div>Hello from {name}!</div>;
    }
     
    const NameInput = () => {
        const state = useRps();
     
        // Update state the way you know and love
        const onChange = e => (state.name = e.target.value);
     
        return <input value={state.name} onChange={onChange} />;
    };
     
    const App = () => (
        <StateProvider initialState={{ name: 'Dan' }}>
            <NameInput />
            <Introduction />
        <StateProvider/>
    )

    Using Selectors

    const initialState = {
        animal: "penguin",
        traits: ["loyal", "slippery", "majestic"],
    };
     
    const TraitList = () => {
        // This will only rerender when `state.traits` value changes
        const traits = useRps(state => state.traits);
     
        return <div>{traits.join(", ")}</div>;
    };

    Middleware

    const validTypes = ["emperor", "adelie", "gentoo"];
     
    const initialState = {
        type: "gentoo",
    };
     
    const typeValidator = ({ prop, value }) => {
        // Return `true` to allow the update, `false` to cancel
        return prop !== "type" || validTypes.includes(value);
    };
     
    const App = () => (
        <StateProvider initialState={initialState} middleware={[typeValidator]}>
            ...
        </StateProvider>
    );

    Updating arrays / abstracting with hooks

    const initialState = {
        penguins: ['dan', 'val', 'tom']
    };
     
    const usePenguins = () => {
        const { penguins } = useRps();
     
        /* All mutating array methods are supported, such as push,
           splice, shift, pop etc. */
        const addPenguin = penguin => penguins.push(penguin);
     
        return { 
            penguinCount: penguins.length, 
            addPenguin
        };
    };
     

    Motivation

    There are a number of options for managing state in a React application, and arguably most well-known is react-redux. Redux is great at what it does and offers a very complete solution, but adds a fair amount of boilerplate and a non-negligible learning curve for developers.

    On the other hand, react-pure-state attempts to conform as much as possible to traditional JS syntax, meaning it can be picked up by anyone and adds minimal extra code to your application.

    I've seen other packages using Proxy in a similar way in the past, but after experimenting none have felt to me as minimal, fast and intuitive as this.

    Install

    npm i react-pure-state

    DownloadsWeekly Downloads

    0

    Version

    1.0.2

    License

    GPL-3.0-or-later

    Unpacked Size

    49.7 kB

    Total Files

    7

    Last publish

    Collaborators

    • dan-js