@react-aria/collections

What is @react-aria/collections?

@react-aria/collections is a library that provides utilities for managing collections of items in React applications. It is part of the React Aria suite, which offers a set of hooks and components for building accessible user interfaces. This package helps with managing state and rendering lists, grids, and other collections of items.

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

useCollection

The `useCollection` hook helps manage a collection of items. It takes an array of items and a function to get the key for each item. The hook returns a collection that can be mapped over to render the items.

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

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

function MyComponent() {
  const { collection } = useCollection({
    items,
    getKey: (item) => item.id
  });

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

useListState

The `useListState` hook manages the state of a list of items. It takes an array of items and a function to get the key for each item. The hook returns a state object that includes the collection of items, which can be used to render the list.

import { useListState } from '@react-aria/collections';

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

function MyComponent() {
  const state = useListState({
    items,
    getKey: (item) => item.id
  });

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

useGridState

The `useGridState` hook manages the state of a grid of items. It takes an array of items and a function to get the key for each item. The hook returns a state object that includes the collection of items, which can be used to render the grid.

import { useGridState } from '@react-aria/collections';

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

function MyComponent() {
  const state = useGridState({
    items,
    getKey: (item) => item.id
  });

  return (
    <div role="grid">
      {state.collection.map(item => (
        <div role="row" key={item.id}>{item.name}</div>
      ))}
    </div>
  );
}

Other packages similar to @react-aria/collections

react-virtualized

react-virtualized provides a set of components for efficiently rendering large lists and tabular data. It focuses on performance and offers features like lazy loading and infinite scrolling. Compared to @react-aria/collections, react-virtualized is more performance-oriented but does not focus on accessibility.

react-window

react-window is a lightweight library for rendering large lists and tabular data. It is similar to react-virtualized but with a smaller footprint and simpler API. Like react-virtualized, it focuses on performance rather than accessibility, making it different from @react-aria/collections.

downshift

downshift is a library for building accessible autocomplete, combobox, dropdown, and menu components. It provides utilities for managing state and rendering collections of items with a focus on accessibility. While it shares the accessibility focus with @react-aria/collections, downshift is more specialized in handling dropdowns and menus.

README

@react-aria/collections

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