TinyBase logoTinyBase β

useValueState

The useValueState primitive returns a Value from a Store and a callback to set it, following the common Solid useState convention.

useValueState(
  valueId: MaybeAccessor<string>,
  storeOrStoreId?: MaybeAccessor<undefined | StoreOrStoreId>,
): [value: Accessor<ValueOrUndefined>, setValue: (value: Value) => void]
TypeDescription
valueIdMaybeAccessor<string>

The Id of the Value.

storeOrStoreId?MaybeAccessor<undefined | StoreOrStoreId>

The Store to get data from: omit for the default context Store, provide an Id for a named context Store, or provide an explicit reference.

returns[value: Accessor<ValueOrUndefined>, setValue: (value: Value) => void]

A tuple containing the current Value and a setter callback that can be called with a new Value.

This primitive is useful for creating components that read and write a Value in a single line, similar to how you would use Solid's useState primitive.

The component this is used in will update when the Value changes.

Example

This example creates a Store, binds it to the primitive, and reads the resulting Solid Accessor.

import {createRoot} from 'solid-js';
import {createStore} from 'tinybase';
import {useValueState} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore();
  const [open, setOpen] = useValueState('open', store);
  setOpen(true);
  console.log(open());
  // -> true
  dispose();
});

Since

v8.3.0