# create-context-state

> Create a context hook and provider for managing the state of your react application

Latest version **2.0.3** (published 2024-07-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install create-context-state
pnpm add create-context-state
yarn add create-context-state
bun add create-context-state
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.3 |
| Published | 2024-07-30 |
| First published | 2021-02-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 58.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3036 |
| Maintainers | ifiokjr |
| Keywords | remirror |

## Links

- npm: https://www.npmjs.com/package/create-context-state
- Repository: https://github.com/remirror/remirror
- Homepage: https://github.com/remirror/remirror/tree/HEAD/packages/create-context-state
- Issues: https://github.com/remirror/remirror/issues
- npm.io page: https://npm.io/package/create-context-state

## Dependencies (1)

- [@babel/runtime](https://npm.io/package/@babel/runtime.md) ^7.22.3

## Recent versions

- 2.0.3 (latest) — 2024-07-30
- 2.0.3-beta.1 (beta) — 2024-07-19
- 0.0.0-pr2271.2 (pr2271) — 2024-07-18
- 0.0.0-pr2222.1 (pr2222) — 2023-12-12
- 0.0.0-pr2223.1 (pr2223) — 2023-12-12
- 0.0.0-pr2169.2 (pr2169) — 2023-11-06
- 0.0.0-pr2166.4 (pr2166) — 2023-10-06
- 0.0.0-pr2156.1 (pr2156) — 2023-09-28
- 0.0.0-pr2128.4 (pr2128) — 2023-07-26
- 0.0.0-pr2118.1 (pr2118) — 2023-07-13
- 0.0.0-pr2100.1 (pr2100) — 2023-06-28
- 0.0.0-pr1966.1 (pr1966) — 2022-12-26
- 0.0.0-pr1948.1 (pr1948) — 2022-11-25
- 0.0.0-pr1942.1 (pr1942) — 2022-11-21
- 0.0.0-pr1938.1 (pr1938) — 2022-11-15
- … 171 more at https://npm.io/package/create-context-state/versions

## README

# create-context-state

> Manage your react state with a simple context hook creator.

[![Version][version]][npm] [![Weekly Downloads][downloads-badge]][npm] [![Bundled size][size-badge]][size] [![Typed Codebase][typescript]](#) [![MIT License][license]](#)

[version]: https://flat.badgen.net/npm/v/create-context-state
[npm]: https://npmjs.com/package/create-context-state
[license]: https://flat.badgen.net/badge/license/MIT/purple
[size]: https://bundlephobia.com/result?p=create-context-state
[size-badge]: https://flat.badgen.net/bundlephobia/minzip/create-context-state
[typescript]: https://flat.badgen.net/badge/icon/TypeScript?icon=typescript&label
[downloads-badge]: https://badgen.net/npm/dw/create-context-state/red?icon=npm

<br />

## Installation

```bash
# yarn
yarn add create-context-state

# pnpm
pnpm add create-context-state

# npm
npm install create-context-state
```

<br />

## Usage

Create a context and provider with built in setters and getters.

```tsx
import { createContextState } from 'create-context-state';

const [CountProvider, useCount] = createContextState(({ set, get }) => ({
  defaultValue: 0,
  value: 0,
  increment: () => set((state) => ({ value: state.value + 1 })),
  decrement: () => set((state) => ({ value: state.value - 1 })),
  reset: () => get('value') !== get('defaultValue'),
}));

const App = () => {
  return (
    <CountProvider>
      <Counter />
    </CountProvider>
  );
};

const Counter = () => {
  const { value, increment, decrement, reset } = useCount();

  return (
    <>
      <span>{value}</span>
      <button onClick={() => increment()}>+</button>
      <button onClick={() => decrement()}>-</button>
      <button onClick={() => reset()}>reset</button>
    </>
  );
};
```

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