Ariakit
/

useCollectionStore

Creates a collection store to control Collection components.

Code examples

Optional Props


defaultItems

T[] | undefined = []

The defaut value for the items state.


items

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

A callback that gets called when the items state changes.

Code examples

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

store

Store<Partial<S>> | undefined

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

Live examples

Return Props


registerItem

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();

renderItem

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();

item

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

Gets an item by its id.

Live examples

Code examples

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

getState

() => S

Returns the current store state.


setState

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

Sets a state value.


useState

UseState<StoreState<T>>

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

Follow updates

Join 1,000+ subscribers and receive monthly updates with the latest improvements on API Reference.

Read latest issue

No Spam. Unsubscribe at any time.