This work builds on #79 by @GeraldHost based on my comment in #77. It seems to be an alternative to #92, with the added benefit of dropping the Recompose library and supporting ref forwarding through withFocusable provided the register callback is used in the child component. Using the register callback is, however, optional. The only requirement to make a component focusable is still to wrap it in the withFocusable HOC as before.
The individual functionalities that were implemented with Recompose have been substituted as follows:
Config: HOC accepts config options and combines these with the props as before when passed to the hook
getContext: useFocusable takes the parentFocusKey from the FocusContext
withStateHandlers: In useFocusable via useState and returned state is applied as component props
withContext: HOC uses the FocusContext provider to pass the new parent key to children
withHandlers: useFocusable passes these directly to addFocusable now, so no need to omit from props later
lifecycle: useFocusable implements this via useEffect
pure: HOC uses React.memo
omitProps: Unnecessary, interal props are removed when destructuring or in the case of handlers never placed on the props object
The useFocsable hook has not been exposed as a public API yet, but could be for use in leaf nodes if desired.
This work builds on #79 by @GeraldHost based on my comment in #77. It seems to be an alternative to #92, with the added benefit of dropping the Recompose library and supporting ref forwarding through
withFocusable
provided theregister
callback is used in the child component. Using theregister
callback is, however, optional. The only requirement to make a component focusable is still to wrap it in thewithFocusable
HOC as before.The individual functionalities that were implemented with Recompose have been substituted as follows:
getContext
: useFocusable takes the parentFocusKey from the FocusContextwithStateHandlers
: In useFocusable via useState and returned state is applied as component propswithContext
: HOC uses the FocusContext provider to pass the new parent key to childrenwithHandlers
: useFocusable passes these directly toaddFocusable
now, so no need to omit from props laterlifecycle
: useFocusable implements this via useEffectpure
: HOC uses React.memoomitProps
: Unnecessary, interal props are removed when destructuring or in the case of handlers never placed on the props objectThe
useFocsable
hook has not been exposed as a public API yet, but could be for use in leaf nodes if desired.