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