[Experiment] feat(react-hooks): add react-hooks #3896
Conversation
…feat/add-react-hooks-package
ghost
requested review from
|
Deploy preview for the-carbon-components ready! Built with commit 6c0f2f2 https://deploy-preview-3896--the-carbon-components.netlify.com |
|
Deploy preview for carbon-components-react ready! Built with commit 6c0f2f2 https://deploy-preview-3896--carbon-components-react.netlify.com |
|
Deploy preview for carbon-elements ready! Built with commit 6c0f2f2 |
…arbon into feat/add-react-hooks-package
| * messages sent is important. | ||
| */ | ||
| export function useAnnouncer() { | ||
| const node = usePortalNode('carbon-announcer', node => { |
There was a problem hiding this comment.
I'm curious if we want a callback to usePortalNode, or if we should just put this in an effect 🤔
There was a problem hiding this comment.
this is pretty clear to read. I like it 😸
There was a problem hiding this comment.
This seems great! Should we get a ticket going that tracks some usage documentation around -- i'm thinking in particular the announcer, but the other hooks as well. I'm also wondering if we should get something on paper about what warrants making something a hook.
| * messages sent is important. | ||
| */ | ||
| export function useAnnouncer() { | ||
| const node = usePortalNode('carbon-announcer', node => { |
There was a problem hiding this comment.
this is pretty clear to read. I like it 😸
| const assertiveNode = node.querySelector('#carbon-assertive-announcement'); | ||
| const politeNode = node.querySelector('#carbon-polite-announcement'); | ||
| const timeoutId = setTimeout(() => { | ||
| if (mode === 'assertive' && assertiveNode.textContent !== announcement) { |
This is an exploratory PR to gauge interest in a dedicated
react-hookspackage that could surface helpful hooks not only for our own project, but to be exposed for others to consume.In this PR, we introduce three hooks:
useId: equivalent to ourinstanceIdhelpers, provides a unique id for the lifecycle of a componentusePortalNode: is a way to get access to a node in which one could render a portal, used inuseAnnouncerto get access to a singleton#carbon-announcernodeuseAnnouncer: a way to control displaying polite and assertive messages in dedicated aria-live regionsIn the future, it would be awesome to consolidate hooks we use across projects to make it easier for product teams to use/leverage them. I would love to expand this package to add support for window events, in particular for things like scroll/resize/scroll direction
Changelog
New
packages/react-hooksuseIdusePortalNodeuseAnnouncerChanged
Removed
Testing / Reviewing
useAnnounceris an interesting use case, here's a video for a full overview of what to expect when testing with VO