create-context-state

create-context-state

Manage your react state with a simple context hook creator.

Installation

# yarn
yarn add create-context-state

# pnpm
pnpm add create-context-state

# npm
npm install create-context-state

Usage

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

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>
    </>
  );
};