# use-context-factory

> Factory method to generate use-context provider and custom hooks

Latest version **1.0.1** (published 2022-03-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install use-context-factory
pnpm add use-context-factory
yarn add use-context-factory
bun add use-context-factory
```

## Health

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

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2022-03-07 |
| First published | 2022-03-06 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Ankit Chouhan |
| Maintainers | ankitchouhan1020 |

## Links

- npm: https://www.npmjs.com/package/use-context-factory
- Repository: https://github.com/ankitchouhan1020/use-context-factory
- Homepage: https://github.com/ankitchouhan1020/use-context-factory#readme
- Issues: https://github.com/ankitchouhan1020/use-context-factory/issues
- npm.io page: https://npm.io/package/use-context-factory

## Recent versions

- 1.0.1 (latest) — 2022-03-07
- 1.0.0 — 2022-03-07
- 0.0.1 — 2022-03-06

## README

## use-context-factory

This package provides an efficient way to create custom hooks for React Context api.


You may have used this pattern to create custom hooks for using context before and you might end up duplicating the code multiple times.

```js

const CounterContext = createContext(null);

export const CounterProvider = ({ children }) => {
    const [ count, setCount ] = useState(0);
    
    return (
        <CounterContext.Provider value={[ count, setCount ]}>
            { children }
        </CounterContext.Provider>
    );
}

export const useCounter = () => useContext(CounterContext);

```

This package provides a factory to create these custom hooks. [Code Sandbox Example](https://codesandbox.io/s/flamboyant-borg-8kh3bq?file=/src/App.js)

```js
const { createStateContext } from 'use-context-factory';

// It can be any custom hooks that return some value to pass to provider.
const useNumberState = (init) => useState(init || 0);

export const [ CounterProvider, useCount] = createStateContext(useNumberState);

///

const Parent = () => {
    return (
        <CounterProvider initialValue={1}>
            <Counter/>
        </CounterProvider>
    );
}

```

This pattern is mentioned in [Micro State Management with React Hooks](https://github.com/PacktPublishing/Micro-State-Management-with-React-Hooks).

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