@react-stately/collections

What is @react-stately/collections?

@react-stately/collections is a library that provides utilities for managing collections of data in React applications. It offers a set of hooks and components to handle common collection operations such as iteration, filtering, and sorting in a declarative way.

What are @react-stately/collections's main functionalities?

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

Other packages similar to @react-stately/collections

react-table

react-table is a lightweight, fast, and extendable data grid built for React. It provides hooks for managing table state, including sorting, filtering, and pagination. Compared to @react-stately/collections, react-table is more focused on tabular data and provides more advanced features for table management.

react-virtualized

react-virtualized is a library for efficiently rendering large lists and tabular data in React. It provides components for virtualizing rows and columns, which can significantly improve performance for large datasets. While @react-stately/collections focuses on collection management, react-virtualized is specialized in optimizing rendering performance.

react-window

react-window is a lightweight library for rendering large lists and tabular data in React. It is similar to react-virtualized but with a smaller API surface and better performance. Like react-virtualized, it focuses on rendering performance, whereas @react-stately/collections provides utilities for managing collections.

README

@react-stately/collections

This package is part of react-spectrum. See the repo for more details.