TinyBase logoTinyBase β

useValuesState

The useValuesState primitive returns a Values object and a function to set it, following the same pattern as Solid's createSignal convention.

useValuesState(storeOrStoreId?: MaybeAccessor<undefined | StoreOrStoreId>): [Accessor<Values>, (values: Values) => void]
TypeDescription
storeOrStoreId?MaybeAccessor<undefined | StoreOrStoreId>

The Store to be accessed: omit for the default context Store, provide an Id for a named context Store, or provide an explicit reference.

returns[Accessor<Values>, (values: Values) => void]

An array containing the Values object and a function to set it.

This is a convenience primitive that combines the useValues and useSetValuesCallback primitives. It's useful when you need both read and write access to all Values in a single component.

A Provider component is used to wrap part of an application in a context, and it can contain a default Store or a set of Store objects named by Id. The useValuesState primitive lets you indicate which Store to use: omit the parameter for the default context Store, provide an Id for a named context Store, or provide a Store explicitly by reference.

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 {useValuesState} from 'tinybase/ui-solid';

createRoot((dispose) => {
  const store = createStore();
  const [values, setValues] = useValuesState(store);
  setValues({open: true});
  console.log(JSON.stringify(values()));
  // -> '{"open":true}'
  dispose();
});

Since

v8.3.0