Wrapper Component for Item

[ashleyryan]

I have a custom Item component for my Listbox that doesn't do much besides add some props to the type definition that get used when we render an li.

It's something like this:

type CustomListboxProps = {
  label: string
}

export type ListboxOptionProps = React.ComponentPropsWithoutRef<Item> & CustomListboxProps

export const ListboxOption = (props: ListboxOptionProps) => null;

Object.assign(ListboxOption, Item)

This works pretty well, but I have another component where, for backwards compatibility, I need to accept a value prop and convert that to the Item's key prop. I can't do that in ListboxOption, because that's not a real component that gets rendered.

I did try to wrap the getCollectionNode generator function on the item like this, but that doesn't work either, the collection code pulls key before this gets called.

ListboxOption.getCollectionNode = function* getCollectionNode(props: ListboxOptionProps & { key?: string | number }, context: unknown) {
  const { value, key, ...rest } = props
  const newProps = {
    ...rest,
    key: value ?? key,
  }

  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  yield* (Item as unknown as any).getCollectionNode(newProps, context)
}

Is there any way to wrap an item or map props to accept a different prop name for key?

[devongovett]

For now this isn't really supported, though you started having the right idea of how you could implement it with getCollectionNode. However, often you can make a component that you put inside <Item> rather than wrapping Item itself. For example, <Item><FancyListBoxOption {...someProps} /></Item>.

In the future wrapping Item will be supported, however. See this section of our recent React Aria Components RFC for more details on how that will work.

[snowystinger]

Just an update that this is now supported https://react-spectrum.adobe.com/react-aria/ListBox.html#reusable-wrappers