useCollectionStore

Creates a collection store to control Collection components.

Code examples

const collection = useCollectionStore();

<Collection store={collection}>
  <CollectionItem>Item</CollectionItem>
  <CollectionItem>Item</CollectionItem>
  <CollectionItem>Item</CollectionItem>
</Collection>
const collection = useCollectionStore();

<Collection store={collection}>
  <CollectionItem>Item</CollectionItem>
  <CollectionItem>Item</CollectionItem>
  <CollectionItem>Item</CollectionItem>
</Collection>

Optional Props

`defaultItems`

T[] | undefined = []
T[] | undefined = []

The defaut value for the items state.

`items`

T[]
T[]

Lists all items along with their metadata. This state is automatically updated when an item is registered or unregistered using the registerItem function.

`setItems`

BivariantCallback<(items: T[]) => void> | undefined
BivariantCallback<(items: T[]) => void> | undefined

A callback that gets called when the items state changes.

Code examples

const [items, setItems] = useState([]);
const collection = useCollectionStore({ items, setItems });
const [items, setItems] = useState([]);
const collection = useCollectionStore({ items, setItems });

`store`

Store<Partial<S>> | undefined
Store<Partial<S>> | undefined

Another store object that will be kept in sync with the original store.

Live examples

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

Return Props

`registerItem`

BivariantCallback<(item: T) => () => void>
BivariantCallback<(item: T) => () => void>

Registers an item in the collection. This function returns a cleanup function that unregisters the item.

Code examples

const unregisterItem = store.registerItem({ id: "item-1" });
// on cleanup
unregisterItem();
const unregisterItem = store.registerItem({ id: "item-1" });
// on cleanup
unregisterItem();

`renderItem`

BivariantCallback<(item: T) => () => void>
BivariantCallback<(item: T) => () => void>

Renders an item in the collection. This function returns a cleanup function that unmounts the item.

Code examples

const unrenderItem = store.renderItem({ id: "item-1" });
// on cleanup
unrenderItem();
const unrenderItem = store.renderItem({ id: "item-1" });
// on cleanup
unrenderItem();

`item`

(id: string | null | undefined) => T | null
(id: string | null | undefined) => T | null

Gets an item by its id.

Live examples

Animated TabPanelUsing plain CSS transitions to slide in and out TabPanel components as they are expanded.

Code examples

const item = store.item("item-1");
const item = store.item("item-1");

`getState`

() => S
() => S

Returns the current store state.

`setState`

<K extends keyof S>(key: K, value: SetStateAction<S[K]>) => void
<K extends keyof S>(key: K, value: SetStateAction<S[K]>) => void

Sets a state value.

`useState`

UseState<StoreState<T>>
UseState<StoreState<T>>

Deprecated: Use useStoreState instead.

Re-renders the component when the state changes and returns the current state.

useCollectionStore

Code examples

Live examples

Code examples

Code examples

Live examples

Code examples

Stay tuned