YoltraYoltra
TSPy

createHooks

function
react/src/hooks/createHooks.ts:240
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

NameTypeDescription
Rextends stringReducer name union.
Sextends Record<R, any>State record keyed by R.
EMextends EventMapBaseEvent map.

Parameters

NameTypeDescription
StoreContextContext<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, 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>
  );
}