create-context-state
TypeScript icon, indicating that this package has built-in type declarations

2.0.3 • Public • Published

create-context-state

Manage your react state with a simple context hook creator.

Version Weekly Downloads Bundled size Typed Codebase MIT License


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

Readme

Keywords

Package Sidebar

Install

npm i create-context-state

Weekly Downloads

29,629

Version

2.0.3

License

MIT

Unpacked Size

59.9 kB

Total Files

14

Last publish

Collaborators

  • ifiokjr