Skip to main content
Home
Browse packagesDocsSign in

@rafde/con-estado@0.5.1
Built and signed on GitHub Actions

latest
rafde/con-estado

Deeply nested state manager for ReactJS

This package works with Node.js, Deno, BrowsersIt is unknown whether this package works with Cloudflare Workers, Bun
It is unknown whether this package works with Cloudflare Workers
This package works with Node.js
This package works with Deno
It is unknown whether this package works with Bun
This package works with Browsers
JSR Score
100%
Published
3 weeks ago (0.5.1)
Report package
function createConStore
createConStore<
S extends DS,
AR extends ActRecord,
SP extends Record<string, unknown>,
Sel extends Selector<S, AR, SP> = DefaultSelector<S, AR, SP>,
>(
initial: Initial<S>,
options?: CreateConStoreOptions<S, AR, SP>,
selector?: Sel,
): CreateConStoreReturnType<S, AR, SP, Sel>

Creates a global state store with history tracking and subscription through React's useSyncExternalStore capabilities. Similar to useCon but for managing global state that persists across component unmounts.

Examples

Basic usage

// Create a store
const useStore = createConStore({
  user: { name: '', age: 0 },
  settings: { theme: 'light' }
});

// Use in components
function UserProfile() {
  const [state, { set }] = useStore();
  return (
    <input
      value={state.user.name}
      onChange={e => set('user.name', e.target.value)}
    />
  );
}

Type Parameters

S extends DS
  • The data structure (DS) that can be used.
AR extends ActRecord
  • Action record that will return from options.acts
SP extends Record<string, unknown>
Sel extends Selector<S, AR, SP> = DefaultSelector<S, AR, SP>
  • Selector

Parameters

initial: Initial<S>
  • The initial state object or function that returns the initial state object
optional
options: CreateConStoreOptions<S, AR, SP>
  • Configuration options.
optional
selector: Sel = DefaultSelector
  • A function to customize the shape of the returned state. By default, returns [state, controls]. Create your own selector to return a different structure. Receives all controls and state history as props.

Return Type

CreateConStoreReturnType<S, AR, SP, Sel>

A React hook function that provides access to the store's state and controls.

createConStore<
S extends DS,
SP extends Record<string, unknown>,
Sel extends Selector<S, Record<never, never>, SP>,
>(
initial: Initial<S>,
selector: Sel,
): CreateConStoreReturnType<S, Record<never, never>, SP, Sel>

Creates a global state store with history tracking and subscription through React's useSyncExternalStore capabilities. Similar to useCon but for managing global state that persists across component unmounts.

Examples

Basic usage

// Create a store
const useStore = createConStore({
  user: { name: '', age: 0 },
  settings: { theme: 'light' }
});

// Use in components
function UserProfile() {
  const [state, { set }] = useStore();
  return (
    <input
      value={state.user.name}
      onChange={e => set('user.name', e.target.value)}
    />
  );
}

selector example

// Default selector usage: [state, controls]
const useStore = createConStore({ count: 0 });

// Use in component
function Component() {
  const [state, controls] = useStore();
 }

// Custom selector usage
const useStoreWithSelector = createConStore(
  { count: 0 },
  // Custom selector
  ({ state, setWrap }) => ({
    count: state.count,
    increment: setWrap(draft => { draft.count++ })
  })
);

// Use in component
function Component() {
  const {count, increment} = useStoreWithSelector();
}

// Overwrite selector
function Component() {
  const {count, increment} = useStoreWithSelector(({ state, setWrap }) => ({
    count: state.count,
    increment: setWrap(draft => { draft.count++ })
  }));
}

Type Parameters

S extends DS
  • The data structure (DS) that can be used.
SP extends Record<string, unknown>
Sel extends Selector<S, Record<never, never>, SP>
  • Selector

Parameters

initial: Initial<S>
  • The initial state object or function that returns the initial state object
optional
selector: Sel = DefaultSelector
  • Selector A function to customize the shape of the returned state. By default, returns [state, controls]. Create your own selector to return a different structure. Receives all controls and state history as props.

Return Type

CreateConStoreReturnType<S, Record<never, never>, SP, Sel>

A React hook function that provides access to the store's state and controls.

Add Package

deno add jsr:@rafde/con-estado

Import symbol

import { createConStore } from "@rafde/con-estado";

---- OR ----

Import directly with a jsr specifier

import { createConStore } from "jsr:@rafde/con-estado";

Add Package

npx jsr add @rafde/con-estado

Import symbol

import { createConStore } from "@rafde/con-estado";

Add Package

yarn dlx jsr add @rafde/con-estado

Import symbol

import { createConStore } from "@rafde/con-estado";

Add Package

pnpm dlx jsr add @rafde/con-estado

Import symbol

import { createConStore } from "@rafde/con-estado";

Add Package

bunx jsr add @rafde/con-estado

Import symbol

import { createConStore } from "@rafde/con-estado";