Preact MultiProvider

Provide multiple contexts at the same time without getting lost in a jungle of context providers.

If you properly group context values and don't go crazy with context, than you probably don't need this.

Usage

Install the package:

1# npm
2npm install preact-multi-provider
3# yarn
4yarn add preact-multi-provider
5# pnpm
6pnpm install preact-multi-provider

And then use it in your code:

1import { createContext } from "preact";
2import { MultiProvider, provide } from "preact-multi-provider";
3
4const FooContext = createContext("foo");
5const BarContext = createContext("bar");
6const BazContext = createContext("baz");
7const BoofContexxt = createContext("boof");
8
9// usage
10<MultiProvider
11  values={[
12    { context: FooContext, value: "foo value" },
13    { context: BarContext, value: "bar value" },
14    { context: BazContext, value: "baz value" },
15    { context: BoofContext, value: "boof value" },
16  ]}
17></MultiProvider>;

Why?

In the ideal case you should group context values based on how they are updated over time. Context values that are never updated don't need to be spread out across multiple context providers. In that case you'd store the value on the same object in a single context

1// These values are loaded on init, but never change after that.
2// Let's pretend that those are coming from an initial API request.
3const foo = "foo";
4const bar = "bar";
5
6// Both "foo" and "bar" never change independently, so just group them
7// in one context. No need to use multiple contexts.
8const AppState = createContext({ foo: null, bar: null });
9
10// Somwhere close to the root of your app
11<AppState.Provider value={{ foo, bar }}>...</AppState.Provider>;

Note Grouping values that don't change independently is good for performance and makes debugging easier, because we can skip rendering a lot of components in the tree. If you can avoid the need to use this library the better!

Most enterprise projects end up with >50 providers close to the root of the tree. That makes the code difficult to read and introduces a lot of noise in DevTools and profiling tools.

Before:

1<FooContext.Provider value={"foo"}>
2  <BarContext.Provider value={"bar"}>
3    <BazContext.Provider value={"baz"}>
4      <BoofContext.Provider value={"boof"}>...</BoofContext.Provider>
5    </BazContext.Provider>
6  </BarContext.Provider>
7</FooContext.Provider>

Rewriting both the consuming portions as well as the providing ones is often continiously pushed into the future. So this library makes it easier to migrate to a grouped context model by allowing you to clean up the component tree without touching the consumer side.

After:

1import { MultiProvider } from "preact-multi-provider";
2
3// usage
4<MultiProvider
5  values={[
6    { context: FooContext, value: "foo" },
7    { context: BarContext, value: "bar" },
8    { context: BazContext, value: "baz" },
9    { context: BoofContext, value: "boof" },
10  ]}
11></MultiProvider>;

This will get rid of all the context providers and combine them into a single one. That works because in Preact the internals don't have a concept of context provider components, so we can add as many context objects as we want at the same time.

With this in place, further refactorings to proper grouped context's should be more easy.

License

MIT, see the LICENSE file.