Add useComposedEventHandler hook
#5890
Conversation
szydlovsky
force-pushed
the
@szydlovsky/composeHandlers/hook
branch
from
a7b3a18
to
41ec161
Compare
tjzel
changed the base branch from
main
to
@szydlovsky/WorkletEventHandler-revamp
There was a problem hiding this comment.
Haven't read the example yet, but there are a few steps that should land in this PR.
-
TypeScript tests. Since this is a new hook, we should come-up with some example usages and see if they don't generate TS errors for the users. See current TypeScript tests for reference.
-
Docs page. It should be a standard to ship relevant documentation for new features ASAP. Since this is a relatively small PR I see no reason not to include it here.
szydlovsky
changed the title
useComposedEventHandler hook
| <Animated.ScrollView | ||
| onMomentumScrollBegin={composedHandler1} | ||
| onMomentumScrollEnd={composedHandler2}> | ||
| {[...new Array(20)].map((_each, index) => ( | ||
| <Text>{index}</Text> | ||
| ))} | ||
| </Animated.ScrollView> |
There was a problem hiding this comment.
Will this work properly in runtime? If not, annotate it here.
| ### Returns | ||
|
|
||
| The hook returns a handler object that can be hooked into any [`Animated component`](/docs/fundamentals/glossary#animated-component). | ||
| The handler should be passed to any `onEvent` (e.g. `onScroll`) parameter regardless of what events it handles. |
There was a problem hiding this comment.
This sentence is confusing. I think we should encourage more intuitive usage here, passing the handler to an event handler property that is related to the actual composed handler, e.g. merged onScroll handlers should go to onScroll property.
There was a problem hiding this comment.
It would be nice to have more of a showcase example here. Also the typical usage would be to merge several handlers with the same expected events, e.g. multiple onScroll.
Summary
There have already been some requests for a way to merge our event handlers. Inspired by #5854, I created a hook that can work with any handlers made using
useEvent. I will happily accept any comments and suggestions regarding typing since I am not so sure about it.composeExample.mov
The PR can be merged only ater #5845 (it is also based on it).
Test plan
Open
useComposedEventHandlerexample from Example app and watch event callbacks in console.