GridList

import {GridList, GridListItem} from './GridList';
import {Text} from 'react-aria-components';

let images = [];
function Example() {
  return (
    <GridList
      aria-label="Nature photos"
      selectionMode="multiple"
      layout="grid"
      items={images}>
      {(image) => (
        <GridListItem textValue={image.title}>
          <img src={image.image} width={image.width} height={image.height} alt="" />
          <Text>{image.title}</Text>
          <Text slot="description">By {image.user}</Text>
        </GridListItem>
      )}
    </GridList>
  );
}

import {GridList, GridListItem, GridListLoadMoreItem} from './GridList';
import {Collection, Text} from 'react-aria-components';
import {ProgressCircle} from './ProgressCircle';
import {useAsyncList} from '@react-stately/data';

type Item = {
  id: string;
  description?: string;
  alt_description?: string;
  urls: {regular: string};
  width: number;
  height: number;
  user: {name: string};
};

function AsyncLoadingExample() {
  let list = useAsyncList<Item, number | null>({
    async load({signal, cursor, items}) {
      let page = cursor || 1;
      let res = await fetch(
        `https://api.unsplash.com/topics/nature/photos?page=${page}&per_page=30&client_id=AJuU-FPh11hn7RuumUllp4ppT8kgiLS7LtOHp_sp4nc`,
        {signal}
      );
      let nextItems = await res.json();
      // Filter duplicates which might be returned by the API.
      let existingKeys = new Set(items.map(i => i.id));
      nextItems = nextItems.filter(i => !existingKeys.has(i.id) && (i.description || i.alt_description));
      return {items: nextItems, cursor: nextItems.length ? page + 1 : null};
    }
  });

  return (
    <GridList
      aria-label="Nature photos"
      layout="grid"
      selectionMode="multiple"
      renderEmptyState={() => (
        <ProgressCircle isIndeterminate aria-label="Loading..." />
      )}>
      <Collection items={list.items}>
        {(item) => (
          <GridListItem textValue={item.description || item.alt_description}>
            <img src={item.urls.regular} width={item.width} height={item.height} alt="" />
            <Text>{item.description || item.alt_description}</Text>
            <Text slot="description">By {item.user.name}</Text>
          </GridListItem>
        )}
      </Collection>
      <GridListLoadMoreItem
        onLoadMore={list.loadMore}
        isLoading={list.loadingState === 'loadingMore'} />
    </GridList>
  );
}

import {GridList} from './GridList';

<GridList
  aria-label="Search results"
  renderEmptyState={() => 'No results found.'}>
  {[]}
</GridList>

import {GridList, GridListItem} from './GridList';
import {GridListHeader, GridListSection, Text} from 'react-aria-components';

<GridList
  layout="grid"
  aria-label="Photos">
    <GridListSection>
      <GridListHeader>Fruit</GridListHeader>
      <GridListItem textValue="Apple">
        <img src="https://images.unsplash.com/photo-1630563451961-ac2ff27616ab?q=80&w=687&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={400} />
        <Text>Apple</Text>
        <Text slot="description">PNG • 9/2/2021</Text>
      </GridListItem>
      <GridListItem textValue="Peach">
        <img src="https://images.unsplash.com/photo-1642372849486-f88b963cb734?q=80&w=2858&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
        <Text>Peach</Text>
        <Text slot="description">JPEG • 1/16/2022</Text>
      </GridListItem>
      <GridListItem textValue="Blueberry">
        <img src="https://images.unsplash.com/photo-1606757389667-45c2024f9fa4?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
        <Text>Blueberry</Text>
        <Text slot="description">JPEG • 11/30/2020</Text>
      </GridListItem>
    </GridListSection>
    <GridListSection>
      <GridListHeader>Vegetables</GridListHeader>
      <GridListItem textValue="Broccoli">
        <img src="https://images.unsplash.com/photo-1685504445355-0e7bdf90d415?q=80&w=928&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
        <Text>Broccoli</Text>
        <Text slot="description">PNG • 5/30/2023</Text>
      </GridListItem>
      <GridListItem textValue="Brussels Sprouts">
        <img src="https://images.unsplash.com/photo-1685504507286-dc290728c01a?q=80&w=1740&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
        <Text>Brussels Sprouts</Text>
        <Text slot="description">PNG • 7/3/2021</Text>
      </GridListItem>
      <GridListItem textValue="Peas">
        <img src="https://images.unsplash.com/photo-1587411768345-867e228218c8?q=80&w=1160&auto=format&fit=crop&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" width={600} height={900} />
        <Text>Peas</Text>
        <Text slot="description">PNG • 4/20/2020</Text>
      </GridListItem>
    </GridListSection>
</GridList>

import {GridList, GridListItem} from './GridList';
import {useDragAndDrop, Text, useListData} from 'react-aria-components';

let images = [];
function Example() {
  let list = useListData({
    initialItems: images
  });

  let {dragAndDropHooks} = useDragAndDrop({
    getItems: (keys, items: typeof list.items) => items.map(item => ({'text/plain': item.title})),
    onReorder(e) {
      if (e.target.dropPosition === 'before') {
        list.moveBefore(e.target.key, e.keys);
      } else if (e.target.dropPosition === 'after') {
        list.moveAfter(e.target.key, e.keys);
      }
    }
  });

  return (
    <GridList
      aria-label="Reorderable list"
      layout="grid"
      selectionMode="multiple"
      items={list.items}
      dragAndDropHooks={dragAndDropHooks}
    >
      {image => (
        <GridListItem textValue={image.title}>
          <img src={image.image} width={image.width} height={image.height} alt="" />
          <Text>{image.title}</Text>
          <Text slot="description">{image.user}</Text>
        </GridListItem>
      )}
    </GridList>
  );
}