react-reactive-context

Table of Contents

• About
• Installing
• Doc
• Usage
• License

About

The purpose of this module is increase the functionality of React.Context without add into the project a big library like redux. This module work in the same way of base React.Context but adds the possibility to set a new value without update Context.Provider prop, also allows to read Context state where you want into the code, there is also the possibility to add subscribers called that will be called when an update of Context occurs. Finally, the creator function or Context.Provider component accept a decorator that receives a current Context state and a set of attributes from each reader (hook, Consumer, subscriber) to customize the state for each of them.

Installing

npm install --save react-reactive-context

Doc

createReactiveContext

return a new Context, the function accepts two parameters

name	type	description
state	any	default context value
decorator	func	when the state change take its value and return a new decorated state

Context.Provider

Provider accepts the following props @seeProvider

name	type	description
value	any	context value
decorator	func	when the state change take its value and return a new decorated state

Context.Consumer

Consumer props are passed like decorators to decorator function @see Consumer

useReactiveContext

trigger component update if something changes, accepts two parameters

name	type	description
Context	ReactiveContext	Context variable
decorators	object	passed to decorator function

subscribe

accepts two parameters

name	type	description
callback	func	return current decorated state
decorators	object	passed to decorator function

set

update a Context, accepts new state value

get

return current Context status everywhere, accepts a decorator object

removeAllSubscribers

remove all subscribtion registered by subscribe method

Usage

Import

    import React, { useEffect, useState } from "react";
    import { createReactiveContext, useReactiveContext } from "react-reactive-context";

Initialization

    type MyContext = {
        color: string,
        supportColor?: string
    };

    type MyContextDecorated = {
        ...
    };

    type MyDecorators = {};

    //Context initialization, could be empty
    const Context = createReactiveContext<MyContext, MyContextDecorated, MyDecorators>({
        supportColor: "#AA0000"
    }, (state) => processedState);

    <Context.Provider value={state} decorator={(state) => processedState}>
        {children}
    </Context.Provider>

Hook

    //update component by custom hook
    const {state, decoratedState} = useReactiveContext(Context, { /* decorators returned inside decorator function */ });

Consumer

    <Context.Consumer /* all props except children are passed like decorators to decorator */>
        {({state, decoratedState}) => null}
    </Context.Consumer>

Subscriber

   useEffect(() => {
        //listen to any Context change
        const subscription = Context.subscribe(({state, decoratedState}) => {
            
        }, {/* decorators returned inside decorator function */});

        return () => {
            //unsubscribe
            subscription();
        };
    }, []);

Setter

    Context.set(state);

or you could update Context.Provider value

Getter

    const {state, decoratedState} = Context.get(/* decorators returned inside decorator function */);

License

MIT © andmau90