react-dividable-context
    TypeScript icon, indicating that this package has built-in type declarations

    1.2.2 • Public • Published

    react-dividable-context

    GitHub package version NPM Donate

    Demo available on GitHub Pages.

    API

    Similar to the official context API added in React 16.3, which is what gets used by this module internally.

    // Check whether two values are the same
    // Uses `JSON.stringify(a) === JSON.stringify(b)` by default
    type EqualsFunction<T> = (a: T, b: T) => boolean;
     
    // Create a new context
    const context = create(defaultValueT, EqualsFunction<T>);
     
    // The provider/consumer, similar to the ones from React Context
    const provider = <context.Provider/>; // See note below!
    const consumer = <context.Consumer/>;
     
    // A consumer that only updates if the given field(s) update
    const partialConsumer = context.getConsumer(['fieldA', 'fieldB']);
     
    // Otherwise, we can also use the "main" one with the "keys" property
    const listenToFieldA = <context.Consumer keys={['fieldA']} />;
     
    // We can mix a partial and the "keys" prop too
    // This one will listen to fieldA, fieldB and fieldC
    const listenToSeveral = <partialConsumer keys={['fieldC']} />;
     
    // We can also check for "sub keys"
    // This'll listen to fieldA and fieldB.subA
    const listenForSubKey = <context.Consumer keys={['fieldA', ['fieldB', 'subA']]} />;

    Important: Unlike the official Provider, the one exposed by context prevents its children from updating. This allows wrapping your app in the provider and updating the value prop, without it having re-rendering the whole app. All (descendant) consumers will still update.

    const context = create({});
    // ...
        <context.provider value={{}}>
            <p>This will never update! {Date.now()}</p>
            <context.consumer>
                {data => <p>This one updates, though. {Date.now()}</p>}
            </context.consumer>
        </context.provider>
    // ...

    Usage

    npm install --save react-dividable-context;
    # or 
    yarn add react-dividable-context;
    import * as React from 'react';
    import create from 'react-dividable-context';
     
    // Our demo data
    interface ITest {
      abc: string;
      def: number;
      idk: number[];
    }
     
    // Create the context, similar to React.createContext
    const contexter = create({ abc: 'ABC', def: 123, idk: [0] });
    const ConsumerABC = contexter.getConsumer(['abc']);
    const ConsumerMixed = contexter.getConsumer(['abc', 'def']);
     
    interface IAppState {
      test: ITest;
    }
    class App extends React.Component<any, IAppState> {
      constructor(props: any, context?: any) {
        super(props, context);
        this.state = { test: { abc: 'ABC', def: 123, idk: [0] } };
      }
      public render() {
          return (
              <context.provider value={this.state.test}>
                <context.consumer>
                    {test => <p>Something changed! {Date.now()}</p>}
                </context.consumer>
                <ConsumerABC>
                    {test => <p>Field 'abc' changed! {Date.now()}</p>}
                </ConsumerABC>
                <ConsumerMixed>
                    {test => <p>Field 'abc' and/or 'def' changed! {Date.now()}</p>}
                </ConsumerMixed>
              </context.provider>
          )
      }
    }

    Keywords

    none

    Install

    npm i react-dividable-context

    DownloadsWeekly Downloads

    1

    Version

    1.2.2

    License

    GLP-3.0

    Unpacked Size

    45.8 kB

    Total Files

    18

    Last publish

    Collaborators

    • kelvinschoofs