# @sirse-dev/safe-context

> Safe React context

Latest version **0.3.0** (published 2022-07-20) · MIT license · 0 weekly downloads

## Install

```sh
npm install @sirse-dev/safe-context
pnpm add @sirse-dev/safe-context
yarn add @sirse-dev/safe-context
bun add @sirse-dev/safe-context
```

## Health

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

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

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.0 |
| Published | 2022-07-20 |
| First published | 2022-05-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 17.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Artiom Tretjakovas |
| Maintainers | sirse |

## Links

- npm: https://www.npmjs.com/package/@sirse-dev/safe-context
- Repository: https://github.com/ArtiomTr/safe-context
- Homepage: https://github.com/ArtiomTr/safe-context#readme
- Issues: https://github.com/ArtiomTr/safe-context/issues
- npm.io page: https://npm.io/package/@sirse-dev/safe-context

## Dependencies (1)

- [tiny-invariant](https://npm.io/package/tiny-invariant.md) ^1.2.0

## Recent versions

- 0.3.0 (latest) — 2022-07-20
- 0.2.0 — 2022-07-06
- 0.1.0 — 2022-05-27

## README

# @sirse-dev/safe-context

> Safe React context

[![npm version](https://img.shields.io/npm/v/@sirse-dev/safe-context)](https://www.npmjs.com/package/@sirse-dev/safe-context)
[![npm downloads](https://img.shields.io/npm/dw/@sirse-dev/safe-context)](https://www.npmjs.com/package/@sirse-dev/safe-context)
[![vulnerabilities](https://img.shields.io/snyk/vulnerabilities/npm/@sirse-dev/safe-context)](https://www.npmjs.com/package/@sirse-dev/safe-context)

## Why?

React requires default value for the context. However, in some cases, default value doesn't have any meaning, because consumers cannot exist outside Provider. SafeContext lets you to have context, that could be used only inside provider. Trying to use `Consumer` or `useSafeContext` outside `Provider` will result in runtime error.

## Install

```bash
npm install @sirse-dev/safe-context
```

Or

```bash
yarn add @sirse-dev/safe-context
```

## Usage

```tsx
import { createSafeContext, useSafeContext } from '@sirse-dev/safe-context';

//     This should be non-nullable type ↓      ↓ - no default value.
const SampleContext = createSafeContext<number>();

// Use it as standard context.
const App = () => {
    return (
        <SampleContext.Provider value={10}>
            {/* Some app code... */}

            <SampleContext.Consumer>{(value) => <p>{value}</p>}</SampleContext.Consumer>
            <InnerComponent />
        </SampleContext.Provider>
    );
};

// Or from hook api
const InnerComponent = () => {
    const value = useSafeContext(SampleContext);

    return <div>{value}</div>;
};
```

## License

MIT © [sirse](https://github.com/ArtiomTr)

[Created with aqu 🌊](https://github.com/ArtiomTr/aqu#readme)

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