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