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

Items count: 0

🍎 Apple

🍇 Grape

🍊 Orange

Edit withVite Next.js

12345678910111213141516
import "./style.css";
import * as Ariakit from "@ariakit/react";

export default function Example() {
  const collection = Ariakit.useCollectionStore();
  const length = collection.useState((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>
  );
}

import "./style.css";
import * as Ariakit from "@ariakit/react";

export default function Example() {
  const collection = Ariakit.useCollectionStore();
  const length = collection.useState((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>
useCollectionStore()
useCollectionContext()

<CollectionProvider>
  <Collection>
    <CollectionItem />
  </Collection>
</CollectionProvider>

Follow updates

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

Read latest issue