Ariakit
/

Collection

Track a collection of DOM elements in the exact order they're rendered in the DOM and watch the DOM for any change to their order.

Collection
Edit example
Open preview in a new tab
Items count: 0
🍎 Apple
🍇 Grape
🍊 Orange
import * as Ariakit from "@ariakit/react";

import "./style.css";



export default function Example() {

  const collection = Ariakit.useCollectionStore();

  const length = Ariakit.useStoreState(

    collection,

    (state) => state.renderedItems.length,

  );

  return (

    <Ariakit.Collection store={collection} className="collection">

      <div>Items count: {length}</div>

      <Ariakit.CollectionItem>🍎 Apple</Ariakit.CollectionItem>

      <Ariakit.CollectionItem>🍇 Grape</Ariakit.CollectionItem>

      <Ariakit.CollectionItem>🍊 Orange</Ariakit.CollectionItem>

    </Ariakit.Collection>

  );

}

API

useCollectionStore()

useCollectionContext()



<CollectionProvider>

  <Collection>

    <CollectionItem />

  </Collection>

</CollectionProvider>

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue⁠