@react-stately/collections

Iterating over collections

This feature allows you to iterate over a collection of items and render them in a list. The `useCollection` hook is used to manage the collection state.

import { useCollection } from '@react-stately/collections';

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
];

function MyComponent() {
  const collection = useCollection({ items });

  return (
    <ul>
      {collection.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Filtering collections

This feature allows you to filter a collection of items based on a condition. The `filter` method is used to create a new array with items that match the condition.

import { useCollection } from '@react-stately/collections';

const items = [
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' },
  { id: 3, name: 'Item 3' }
];

function MyComponent() {
  const collection = useCollection({ items });
  const filteredItems = collection.filter(item => item.name.includes('1'));

  return (
    <ul>
      {filteredItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Sorting collections

This feature allows you to sort a collection of items based on a comparison function. The `sort` method is used to order the items in the collection.

import { useCollection } from '@react-stately/collections';

const items = [
  { id: 3, name: 'Item 3' },
  { id: 1, name: 'Item 1' },
  { id: 2, name: 'Item 2' }
];

function MyComponent() {
  const collection = useCollection({ items });
  const sortedItems = collection.sort((a, b) => a.name.localeCompare(b.name));

  return (
    <ul>
      {sortedItems.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}