Collection 📚

Well hello there, data wrangler! 🤠

The collection module is your go-to buddy for managing a... well, a collection of items! 🧺 It's super handy when you have a list of things (like in a dropdown menu or a select component) and you need to keep track of them, navigate through them, or query them.

It helps turn a chaotic bunch of items into an orderly lineup! 🚶‍♂️🚶‍♀️🚶

Core Idea

Imagine you have a list of selectable items. This module helps to:

• Register each item.
• Allow querying for items (e.g., find the first, last, or an item by its value).
• Facilitate keyboard navigation between items.

It's the librarian for your UI components! 🤫

Simplified Usage Example (Conceptual)

// Inside a component like Select or DropdownMenu
import { createCollection } from '@ryvora/react-collection';

const [Collection, useCollection, createCollectionScope] = createCollection<ItemElement, ItemData>();

// In your main component (e.g., Select)
<Collection.Provider scope={scope}>
  {/* Items will register themselves here */}
  {children}
</Collection.Provider>

// In your item component (e.g., SelectItem)
<Collection.Slot scope={scope}>
  <Primitive.div ref={itemRef}>{/* ... */}</Primitive.div>
</Collection.Slot>

// To get items
const getItems = useCollection(scope);
const allItems = getItems();

Organize all the things! 🧹