useStoreState

Store

Receives an Ariakit store object (which can be null or undefined) and returns the current state. If a key is provided as the second argument, it returns the value of that key. If a selector function is provided, the state is passed to it, and its return value is used.

The component using this hook will re-render when the returned value changes.

Code examples

Accessing the whole combobox state:

const combobox = Ariakit.useComboboxStore();
const state = Ariakit.useStoreState(combobox);
const combobox = Ariakit.useComboboxStore();
const state = Ariakit.useStoreState(combobox);

Accessing a specific value from the combobox state:

const combobox = Ariakit.useComboboxStore();
const value = Ariakit.useStoreState(combobox, "value");
const combobox = Ariakit.useComboboxStore();
const value = Ariakit.useStoreState(combobox, "value");

Accessing a value using a selector function:

const combobox = Ariakit.useComboboxStore();
const value = Ariakit.useStoreState(combobox, (state) => state.value);
const combobox = Ariakit.useComboboxStore();
const value = Ariakit.useStoreState(combobox, (state) => state.value);

Accessing the state of a store that may be null or undefined (for example, using a context):

const combobox = Ariakit.useComboboxContext();
const value = Ariakit.useStoreState(combobox, "value");
const combobox = Ariakit.useComboboxContext();
const value = Ariakit.useStoreState(combobox, "value");

useStoreState

Code examples

Stay tuned