CollectionItem
Renders an item in a collection. The collection store can be passed
explicitly through the
store
prop or
implicitly through the parent
Collection
component.
Code examples
Optional Props
getItem
((props: CollectionStoreItem) => CollectionStoreItem) | undefined
A memoized function that returns props to be passed with the item during its registration in the store.
Code examples
const getItem = useCallback((data) => ({ ...data, custom: true }), []);
id
string | undefined
The unique ID of the item. This will be used to register the item in the
store and for the element's id
attribute. If not provided, a unique ID
will be automatically generated.
Live examples


render
RenderProp<React.HTMLAttributes<any> & { ref?: React.Ref<any> | undefined; }> | React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined
Allows the component to be rendered as a different HTML element or React component. The value can be a React element or a function that takes in the original component props and gives back a React element with the props merged.
Check out the Composition guide for more details.
shouldRegisterItem
boolean | undefined = true
Whether the item should be registered as part of the collection.
store
CollectionStore<CollectionStoreItem> | undefined
Object returned by the
useCollectionStore
hook. If not provided, the closest
Collection
or
CollectionProvider
components' context will be used.