Skip to content

Feat: Add useCollectionRef hook to support adjacent child collections #8553

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

nwidynski
Copy link
Contributor

@nwidynski nwidynski commented Jul 15, 2025

This PR adds support for hooking into the builder of child collections via a new useCollectionRef hook. This hook supports the attachment of wrapper hooks to the ref of the collection element, which enables advanced controlled use cases, such as a targeted clearance of the renderer context in components with adjacent collection components as children.

Spoiler: We will make use of this in the upcoming Carousel, which supports an adjacent TabList next to a GridList or ListBox for the tabbed carousel pattern 👍

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

@nwidynski nwidynski changed the title Feat: Add useCollectionRef hook to improve controlled collection cases Feat: Add useCollectionRef hook to improve adjacent child collections Jul 15, 2025
@nwidynski nwidynski changed the title Feat: Add useCollectionRef hook to improve adjacent child collections Feat: Add useCollectionRef hook to support adjacent child collections Jul 15, 2025
@@ -157,6 +176,12 @@ function useSSRCollectionNode<T extends Element>(Type: string, props: object, re
return <Type ref={itemRef}>{children}</Type>;
}

export function useCollectionRef<C extends BaseCollection<object>, E extends Element>(props: CollectionRenderProps<C>, ref: Ref<E>): CollectionRef<C, E> {
Copy link
Contributor Author

@nwidynski nwidynski Jul 16, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Naming and argument order is TBD. I was also considering useImperativeCollectionRef or something alike. Open for suggestions here 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant