contextors

A library for creating "contextors", which efficiently select and combine values from React contexts.

• Contextors combine the values of multiple contexts to compute a single value which is updated when any of its source values change.
• Contextors are efficient and stable. A contextor will always produce the same output given the same source values.
• Contextors are composable. They can be used as sources to other contextors.
• Contextors can be parameterized. A contextor's combining function can accept an extra parameter (called a tag) alongside the context-dependent source values.

contextors makes use of the Contexto library to provide fast, targeted state updates to only the components that need to be notified.

Basic Usage

    // Create a contextor from one or more contexts
    const Contextor1 =
      createContextor(
        [MyContext],
        (myContextValue) => myContextValue.foo
      );

    // Contextors can depend on other contextors
    const Contextor2 =
      createContextor(
        [Contextor1, MyOtherContext],
        (val1, myOtherVal) => val1 + myOtherVal.bar
      );

    // We then read the contextors' values with the `useContextor` hook:
    const Component = () => {
      const value1 = useContextor(Contextor1);
      const value2 = useContextor(Contextor2);

      return <div>{`${value1} / ${value2}`}</div>
    }

    // Contextors can accept a parameter ...
    const UserContextor =
      createContextor(
        [AllUsersContext],
        (allUsers, userId) => allUsers[userId]);

    // ... which is provided to `useContextor`:
    const UserDisplay = ({ userId }) => {
      const userObject = useContextor(UserContextor, userId);

      return <div>{userObject.name}: {userObject.status}</div>
    }

Typescript support

Contextors are implemented in TypeScript, and enforce type safety on contextor creation and usage.

Installation

Contexto, and thus contextors, is compatible with React 16.8+, React Native 16.8+ and Preact 10+.

Once you've installed Contexto, you can just:

npm install contextors

or

yarn add contextors

Documentation

• Computing and combining data with contextors
• Tagged contextors
• Caching
• Simple example
• Formik-like example
• Integration with Redux
• Contextors vs selectors