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.

Items count: 0
ğŸŽ Apple
🍇 Grape
🍊 Orange
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>

Stay tuned

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

No spam. Unsubscribe anytime. Read latest issue⁠