createStoreContext

function createStoreContext<TValue>(): object;

Defined in: createStoreContext.tsx:43

Creates a typed Solid context for sharing a bundle of atoms and stores with a subtree.

The returned StoreProvider only transports the provided object through Solid context. Consumers destructure the contextual atoms and stores, then compose them with the existing hooks like useSelector and useAtom.

The object shape is preserved exactly, so keyed atoms and stores remain fully typed when read back with useStoreContext().

Type Parameters

TValue

TValue extends object

Returns

object

StoreProvider

StoreProvider: (props) => Element;

Parameters

props

ParentProps<{ value: TValue; }>

Returns

Element

useStoreContext

useStoreContext: () => TValue;

Returns

TValue

Example

tsx

const { StoreProvider, useStoreContext } = createStoreContext<{
  countAtom: Atom<number>
  totalsStore: Store<{ count: number }>
}>()

function CountButton() {
  const { countAtom, totalsStore } = useStoreContext()
  const count = useSelector(countAtom)
  const total = useSelector(totalsStore, (state) => state.count)

  return (
    <button
      type="button"
      onClick={() =>
        totalsStore.setState((state) => ({ ...state, count: state.count + 1 }))
      }
    >
      {count()} / {total()}
    </button>
  )
}