# envoc-strict-context

> Provides a function for safely creating React Context(s), Provider(s), and Hook(s)

Latest version **3.3.3** (published 2022-10-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install envoc-strict-context
pnpm add envoc-strict-context
yarn add envoc-strict-context
bun add envoc-strict-context
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.3.3 |
| Published | 2022-10-04 |
| First published | 2022-02-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 12.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | envocdevelopers |
| Keywords | envoc, react, react-hook, react-utility, createStrictContext |

## Links

- npm: https://www.npmjs.com/package/envoc-strict-context
- npm.io page: https://npm.io/package/envoc-strict-context

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 3.3.3 (latest) — 2022-10-04
- 3.3.2 — 2022-10-03
- 3.3.1 — 2022-09-06
- 3.3.0 — 2022-07-15
- 3.2.0 — 2022-03-21
- 3.1.0 — 2022-03-04
- 3.0.0 — 2022-02-21

## README

# envoc-strict-context

[![npm package][npm-badge]][npm]

[npm-badge]: https://img.shields.io/npm/v/envoc-strict-context.png?style=flat
[npm]: https://www.npmjs.com/package/envoc-strict-context

## Overview

This package provides a single utility function, `createStrictContext`, that enables developers to uniformly create a React `Context`, `Context.Provider`, and `useContext` consumer hook.

The `createStrictContext` function exposes only the Context Provider and consumer hook, and prevents developers from interacting with the underlying Context directly. Like the `React.useState` hook, `createStrictContext` returns an array, rather than an object, so that developers may easily specify appropriate, contextual variable names for the returned `Context.Provider` and `useContext` hook.

*Usage*

```ts
const [CounterProvider, useCounterContext] = createStrictContext<CounterState>();
```
___
## Features

 - [Prevents Context usage outside of a Provider](#prevents-context-usage-outside-of-a-provider)
 - [Friendly React Developer Tools Name](#friendly-react-developer-tools-name)
 - [Custom Error Messages](#custom-error-messages)

### Prevents Context usage outside of a Provider

In most cases, developers intend to consume a Context **inside** of a matching Provider. Without `createStrictContext`, if an attempt is made to consume a Context **outside** of a matching Provider, no error will occur. Instead, the returned value will never update from the default value that was specified when the Context was originally created. This behavior can lead to unanticipated bugs.

```ts
// Calling useContext(ThemeContext) outside of ThemeContext.Provider
// will always return 'light', even if that value changes.
const ThemeContext = React.createContext('light');
```

`createStrictContext` differs from this behavior by ensuring that a Context is consumed inside of a matching Provider. The `useContext` hook that is returned from this function will throw an error if it is called outside of its matching Provider.

### Friendly React Developer Tools Name

By default, Context Providers will be displayed as `Context.Provider` in the React Developer Tools Components pane. The `createStrictContext` function allows developers to specify a `name` to be used instead. The snippet below will display the Context Provider as `Counter.Provider`.

```ts
const [CounterProvider, useCounterContext] = createStrictContext<CounterState>({
  name: 'Counter'
});
```

### Custom Error Messages

Developers are able to override the default error message by specifying an `errorMessage` as an argument.

```ts
const [CounterProvider, useCounterContext] = createStrictContext<CounterState>({
  name: 'Counter',
  errorMessage: 'This error message will be shown instead of the default'
});
```

## Caveats

When using `createStrictContext`, developers are unable to specify a default value when the underlying Context is created. The default value for Contexts created using this function will always be `undefined`.

The returned `useContext` hook uses the Context value to determine if it is being called inside of its matching Provider. If the Context value is `undefined`, an error will be thrown.

---
_Source: https://npm.io/package/envoc-strict-context · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._