GridList follows the Collection Components API, accepting both static and dynamic collections. This example shows a dynamic collection, passing a list of objects to the items prop, and a function to render the children.
A Ficus Lyrata LeafBy Clay Banks
Italian beachBy Alan Bajura
Forest roadBy Artem Stoliar
Snowy AuroraBy Janosch Diggelmann
A blue and white firework is seen from aboveBy Janosch Diggelmann
Snowy MountainBy Daniil Silantev
Pastel SunsetBy Marek Piwnicki
Snowy BirchesBy Simon Berger
Snowy Lake ReflectionsBy Daniel Seßler
Rocky night skyBy Dennis Haug
A pine tree covered in snow in a forestBy Anita Austvika
The sun shines through the trees in the forestBy Joyce G
A blurry photo of a field of flowersBy Eugene Golovesov
A foggy road lined with trees and grassBy Ingmar H
A close up of a green palm treeBy Junel Mujar
A green leaf floating on top of a body of waterBy Allec Gomes
Leafy plantsBy Joshua Michaels
A view of a mountain covered in fogBy iuliu illes
A field with tall grass and fog in the backgroundBy Ingmar H
A close up of a wave on a sandy beachBy Jonathan Borba
Desert texturesBy Braden Jarvis
Tew Falls, waterfall, in Hamilton, Canada.By Andre Portolesi
Cave light raysBy Intricate Explorer
Salt Marshes, Isle of Harris, ScotlandBy Nils Leonhardt
An aerial view of a snow covered forestBy Lukas Hädrich
Tall grassBy Ingmar H
Larches on Maple Pass, WashingtonBy Noelle
Heart NebulaBy Arnaud Girault
A pile of shells sitting on top of a sandy beachBy Toa Heftiba
Use renderEmptyState to display a spinner during initial load. To enable infinite scrolling, render a <GridListLoadMoreItem> at the end of the list. Use whatever data fetching library you prefer – this example uses useAsyncList from react-stately.
Use the href prop on a <GridListItem> to create a link. See the client side routing guide to learn how to integrate with your framework. Link interactions vary depending on the selection behavior. See the selection guide for more details.
Use the selectionMode prop to enable single or multiple selection. The selected items can be controlled via the selectedKeys prop, matching the id prop of the items. The onAction event handles item actions. Items can be disabled with the isDisabled prop. See the selection guide for more details.
GridList supports drag and drop interactions when the dragAndDropHooks prop is provided using the useDragAndDrop hook. Users can drop data on the list as a whole, on individual items, insert new items between existing ones, or reorder items. React Aria supports drag and drop via mouse, touch, keyboard, and screen reader interactions. See the drag and drop guide to learn more.
A Ficus Lyrata Leaf in the sunlight (2/2) (IG: @clay.banks)Clay Banks
beach of Italyalan bajura
A winding road in the middle of a forestArtem Stoliar
A green and purple aurora over a snow covered forestJanosch Diggelmann
A blue and white firework is seen from aboveJanosch Diggelmann
A snow covered mountain with a sky backgroundDaniil Silantev
"Pastel Sunset"Marek Piwnicki
Leave the weight behind! You must make yourself light to strive upwards — to reach the light. (A serene winter landscape featuring a dense collection of bare, white trees.)Simon Berger
A snow covered tree with a sky backgroundDaniil Silantev
A lake surrounded by trees covered in snowDaniel Seßler
The night sky with stars above a rock formationDennis Haug
A pine tree covered in snow in a forestAnita Austvika
The sun shines through the trees in the forestJoyce G
A blurry photo of a field of flowersEugene Golovesov
A foggy road lined with trees and grassIngmar H
A close up of a green palm treeJunel Mujar
A green leaf floating on top of a body of waterAllec Gomes
green-leafed plantJoshua Michaels
A view of a mountain covered in fogiuliu illes
A field with tall grass and fog in the backgroundIngmar H
A close up of a wave on a sandy beachJonathan Borba
Desert texturesBraden Jarvis
Tew Falls, waterfall, in Hamilton, Canada.Andre Portolesi
Find me on Instagram! @intricateexplorerIntricate Explorer
Salt Marshes, Isle of Harris, Scotland by Nils Leonhardt. Visit my website: https://nilsleonhardt.com/storytelling-harris/ Instagram: @am.basteirNils Leonhardt
An aerial view of a snow covered forestLukas Hädrich
A close up of a tall grass with a sky in the backgroundIngmar H
Larches on Maple Pass, Washingtonnoelle
IC 1805 La nébuleuse du coeurarnaud girault
A pile of shells sitting on top of a sandy beachToa Heftiba