A generic interface to access a readonly sequential collection of unique keyed items.
Collection interface provides a generic representation
for many types of collections. The collection is read only (immutable), and sequential (ordered). Each item
has a unique key that identifies it, which can be used to access items. It's like a combination
of an array and a map: you can iterate over items in a well defined order, and also access items by key.
|The number of items in the collection.|
|Iterate over all keys in the collection.|
|Get an item by its key.|
|Get the key that comes before the given key in the collection.|
|Get the key that comes after the given key in the collection.|
|Get the first key in the collection.|
|Get the last key in the collection.|
Building a collection#
As discussed on the Collection Components page, React Spectrum implements a JSX-based
API for defining collections. This is implemented by the
useCollection iterates over the JSX tree, and recursively builds a collection
Node objects. Each node includes the value of the item
it represents, along with some metadata about its place in the collection.
These nodes are then wrapped in a class that implements the
interface, and exposes the nodes. State management hooks like
useTreeState handle building the collection and exposing
the necessary interface to components.
When implementing collection components using react-aria hooks
useSelect, you'll iterate over these nodes
to render the data in the collection. The properties exposed by a node are described below.
|The type of item this node represents.|
|A unique key for the node.|
|The object value the node was created from.|
|The level of depth this node is at in the heirarchy.|
|Whether this item has children, even if not loaded yet.|
|The loaded children of this node.|
|The rendered contents of this node (e.g. JSX).|
|A string value for this node, used for features like typeahead.|
|An accessibility label for this node.|
|The index of this node within its parent.|
|A function that should be called to wrap the rendered node.|
|The key of the parent node.|
|The key of the node before this node.|
|The key of the node after this node.|
|Additional properties specific to a particular node type.|