react-dom-utils.md

Home > @asl-19/react-dom-utils

react-dom-utils package

Shared ReactDOM utility functions and types for ASL19 projects.

Functions

Function	Description
useAddHydratedClassName()	Add "hydrated" className to element once site has rendered on client. We use this in Playwright tests to avoid interacting with the page before event handlers are ready.
useDynamicFocusOutlines()	Hide focus outlines when a mousedown event fires; show focus outlines when a keydown event fires. This preserves focus outlines when a user is navigating the site with their keyboard while preventing distracting focus outlines from appearing when the user is navigating via mouse/touch.
useFocusElementAfterRender()	Focus a provided element after the current render. This is necessary to focus an element that will only become focusable after the current render is complete (e.g. if the element comes into view as a result of a setState an event callback).
useFormStateAndFocusManagement({ disableFocusManagement, })	Hook for storing FormState and manipulating focus management based on state.
useOnClickOutside({ handler, isEnabled, ref, })	Detect clicks outside of specific component This code is a slightly modified version of this: https://usehooks.com/useOnClickOutside/

Type Aliases

Type Alias	Description
FormState	useFormStateAndFocusManagement() state
StylableFC	React FunctionComponent that takes an optional className prop.