💫 Introduction

Utilities for creating React contexts in which the hook will throw an error if it is called without being wrapped around a provider.

import { createStrictContext } from 'strict-react-context';

const [NameProvider, useName] = createStrictContext<string>();

function Name() {
  const name = useName();
  return <div>{name}</div>;
}

// Does not throw an error
<NameProvider value="John Doe">
  <Name />
</NameProvider>

// Throws an error
<Name />

🪛 Usage

createStrictContext

Creates a provider / hook pair with React context in which the hook will throw an error if it is called without being wrapped around a provider. This avoids unnecessary checks for undefined after calling the hook.

const [NameProvider, useName] = createStrictContext<string>();

function Name() {
  const name = useName();
  return <h1>{name}</h1>;
}

// Does not throw an error
<NameProvider value="John Doe">
  <Name />
</NameProvider>

// Throws an error
<Name />

createStrictSelectableContext

We also expose a version of strict context using use-context-selector, which allows you to pass a selector function to prevent unnecessary rerenders:

interface User {
  name: string
};

const [UserProvider, useUser] = createStrictSelectableContext<User>();

function Name() {
  const name = useUser(user => user.name);
  return <h1>{name}</h1>;
}

// Does not throw an error
<UserProvider value={{ name: "John Doe" }}>
  <Name />
</UserProvider>

// Throws an error
<Name />

createSelectableContext

A small wrapper around use-context-selector that returns a provider / hook pair instead of a context object.

interface User {
  name: string;
}

const [UserProvider, useUser] = createSelectableContext<User | null>(null);

function Name() {
  // component only rerenders if the user's name changes
  const name = useUser((user) => user.name);
  return <h1>{name}</h1>;
}

💾 Installation

You can install this plugin with:

pnpm add strict-react-context

🪛 Usage

🙌 Contributing

This plugin was created and is maintained by Incentro. If you're running into issues, please open an issue. If you want to contribute, please read our contributing guidelines.