This site is under construction Subscribe to updates

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.

Items count: 0

🍎 Apple

🍇 Grape

🍊 Orange

Installation

npm install ariakit

Learn more in Getting started.

API

useCollectionState()

<Collection>
  <CollectionItem />
</Collection>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import {
  Collection,
  CollectionItem,
  useCollectionState,
} from "ariakit/collection";
import "./style.css";

export default function Example() {
  const collection = useCollectionState();
  return (
    <Collection state={collection} className="collection">
      <div>Items count: {collection.items.length}</div>
      <CollectionItem>🍎 Apple</CollectionItem>
      <CollectionItem>🍇 Grape</CollectionItem>
      <CollectionItem>🍊 Orange</CollectionItem>
    </Collection>
  );
}