From e25ddeaf5d760bd5677ce152603de406f4794c9a Mon Sep 17 00:00:00 2001
From: szydlovsky <9szydlowski9@gmail.com>
Date: Mon, 3 Jun 2024 17:02:54 +0200
Subject: [PATCH] improved composed handler docs to match our standards

---
 .../docs/advanced/useComposedEventHandler.mdx | 43 ++++++++++++-------
 1 file changed, 27 insertions(+), 16 deletions(-)

diff --git a/docs/docs/advanced/useComposedEventHandler.mdx b/docs/docs/advanced/useComposedEventHandler.mdx
index 117f5b650ab0..9dcc052c48ee 100644
--- a/docs/docs/advanced/useComposedEventHandler.mdx
+++ b/docs/docs/advanced/useComposedEventHandler.mdx
@@ -6,23 +6,9 @@ sidebar_position: 6
 
 This is a hook that lets you compose [useEvent](/docs/advanced/useEvent)-based event handlers (such as [useAnimatedScrollHandler](/docs/scroll/useAnimatedScrollHandler) or your own custom ones) into a single, combined event handler.
 
-### Arguments
-
-#### `handlers`
-
-An array of event handlers created using [useEvent](/docs/advanced/useEvent) hook. `useComposedEventHandler` hook reacts to any changes in given handlers and rebuilds whenever it is needed.
-
-### Returns
+## Reference
 
-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 a corresponding `onEvent` prop (e.g. `onScroll` when working with scroll-related handlers). If your composed handler aggregates multiple events that have little in common, put it into a new property, e.g. "composedHandler". It will still work, but the best practice here would be to use several composed handlers for code clarity.
-
-## Example
-
-In the below example we define two different scroll handlers using `useAnimatedScrollHandler`. Then, they are combined by `useComposedEventHandler` hook and passed to `Animated.ScrollView` component.
-Now, each dispatched `onScroll` event gets handled by both merged handlers.
-
-```jsx {29-32,36}
+```jsx
 import Animated, {
   useAnimatedScrollHandler,
   useComposedEventHandler,
@@ -43,13 +29,16 @@ function ComposedEventHandlerExample() {
     },
   });
 
+  // highlight-start
   const composedHandler = useComposedEventHandler([
     onScrollHandler1,
     onScrollHandler2,
   ]);
+  // highlight-end
 
   return (
     <View style={styles.container}>
+      {/* highlight-next-line */}
       <Animated.ScrollView style={styles.scroll} onScroll={composedHandler}>
         <Content />
       </Animated.ScrollView>
@@ -58,6 +47,28 @@ function ComposedEventHandlerExample() {
 }
 ```
 
+<details>
+<summary>Type definitions</summary>
+
+```typescript
+function useComposedEventHandler(
+  handlers: (EventHandlerProcessed<Event, Context> | null)[]
+): ComposedHandlerProcessed<Event, Context>;
+```
+
+</details>
+
+### Arguments
+
+#### `handlers`
+
+An array of event handlers created using [useEvent](/docs/advanced/useEvent) hook. `useComposedEventHandler` hook reacts to any changes in given handlers and rebuilds whenever it is needed.
+
+### 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 a corresponding `onEvent` prop (e.g. `onScroll` when working with scroll-related handlers). If your composed handler aggregates multiple events that have little in common, put it into a new property, e.g. "composedHandler". It will still work, but the best practice here would be to use several composed handlers for code clarity.
+
 ## Remarks
 
 - The hook returns a handler that combines functionalities of all the handlers given as an argument. This way, you can have more than one handler responding to a given event, as well as handle many different type events using just one object.