createHooks · @yoltra/react (0.9)

signature

createHooks<R, S, EM>(StoreContext): YoltraHooks<R, S, EM>

Factory that creates fully-typed React hooks bound to a specific store context. This is the **recommended** setup pattern for yoltra + React. It eliminates the need for explicit type parameters on every hook call, all types are inferred from the store context once, at creation time.

Type parameters

Name	Type	Description
`R`	`extends string`	Reducer name union.
`S`	`extends Record<R, any>`	State record keyed by `R`.
`EM`	`extends EventMapBase`	Event map.

Parameters

Name	Type	Description
`StoreContext`	`Context<null \| StoreInstance<R, S, EM>>`	A React context carrying a `StoreInstance<R, S, EM>`.

Returns

YoltraHooks<R, S, EM>, An object with typed hooks: useStore, useEmit, useSelector, useAtomicProp, useAtomicProps, useEvent, useSuspenseAtomicProp, useSuspenseAtomicProps, and shallowEqual.

Example

example

// 1. Define your event map and state
type AppEM = { ui: { increment: number; decrement: number } };
type AppState = { counter: { value: number } };

// 2. Create a typed context
import { createContext } from 'react';
import { StoreInstance } from '@yoltra/core';
const AppStoreContext = createContext<
  StoreInstance<'counter', AppState, AppEM> | null
>(null);

// 3. Create typed hooks (do this once, export from a shared module)
const { useAtomicProp, useEmit, useEvent } = createHooks(AppStoreContext);

// 4. Use in components, no explicit generics needed
function Counter() {
  const value = useAtomicProp({ reducer: 'counter', property: 'value' });
  const emit = useEmit();
  return (
    <button onClick={() => emit('ui', 'increment', 1)}>
      Count: {value}
    </button>
  );
}