dosc: Rewrite useEvent page

packages/docs-reanimated/docs/advanced/useEvent.mdx

@@ -4,26 +4,75 @@ sidebar_position: 4
 
 # useEvent
 
-import DocsCompatibilityInfo from '../_shared/_docs_compatibility_info.mdx';
+`useEvent` is a low-level hook. It returns event handler that will be called when native event occurs. You can use it to create custom event handler hooks, like [`useScrollViewOffset`](/docs/scroll/useScrollViewOffset/) or [`useAnimatedScrollHandler`](/docs/scroll/useAnimatedScrollHandler/).
 
-<DocsCompatibilityInfo />
+## Reference
 
-This is low-level hook returning event handler that will be invoked with native events, which should be used in order to create custom event handler hook like `useAnimatedGestureHandler` or `useAnimatedScrollHandler`.
+```js
+import { useEvent } from 'react-native-reanimated';
+
+function useAnimatedPagerScrollHandler(handlers, dependencies) {
+  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
+
+  // highlight-start
+  return useEvent(
+    (event) => {
+      'worklet';
+      const { onPageScroll } = handlers;
+
+      if (onPageScroll && event.eventName.endsWith('onPageScroll')) {
+        onPageScroll(event, context);
+      }
+    },
+    ['onPageScroll'],
+    doDependenciesDiffer
+  );
+}
+// highlight-end
+
+return <Animated.View onScroll={useAnimatedPagerScrollHandler} />;
+```
+
+<details>
+<summary>Type definitions</summary>
+
+```typescript
+function useEvent<
+  Event extends object,
+  Context extends Record<string, unknown> = never
+>(
+  handler: EventHandler<Event, Context>,
+  eventNames?: string[],
+  rebuild?: boolean
+): EventHandlerProcessed<Event, Context>;
+
+type EventHandler<
+  Event extends object,
+  Context extends Record<string, unknown> = never
+> = (event: ReanimatedEvent<Event>, context?: Context) => void;
+
+type EventHandlerProcessed<
+  Event extends object,
+  Context extends Record<string, unknown> = never
+> = (event: Event, context?: Context) => void;
+```
+
+</details>
 
 ### Arguments
 
-#### `handler` [function]
+#### `handler`
 
-Handler will receive event object with native payload, that can be passed to custom handler hook's worklets.
+Function that receives event object with native payload, that can be passed to custom handler hook's worklets.
 
-- `event` [object] - event object.
+- `event` - event object.
   The payload can differ depending on the type of the event.
 
-#### `eventNames` [Array]
+#### `eventNames` <Optional/>
 
 Array of event names that will be handled by handler.
 
-#### `rebuilt` [boolean]
+#### `rebuild` <Optional/>
 
 Value indicating whether handler should be rebuilt.
 
@@ -33,20 +82,23 @@ The hook returns event handler that will be invoked when native event is dispatc
 
 ## Example
 
-```js
-function useAnimatedPagerScrollHandler(handlers, dependencies) {
-  const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
+import useEvent from '@site/src/examples/UseHandlerEventExample';
+import useEventSrc from '!!raw-loader!@site/src/examples/UseHandlerEventExample';
 
-  return useEvent(
-    (event) => {
-      'worklet';
-      const { onPageScroll } = handlers;
+<InteractiveExample src={useEventSrc} component={useEvent} />
 
-      if (onPageScroll && event.eventName.endsWith('onPageScroll')) {
-        onPageScroll(event, context);
-      }
-    },
-    ['onPageScroll'],
-    doDependenciesDiffer,
-  );
-```
+This example can be more easily implemented using [`useScrollViewOffset`](/docs/scroll/useScrollViewOffset/).
+
+## Remarks
+
+- Keep in mind that not all scroll events are supported on the web, only `onScroll` is available across browsers.
+
+## Platform compatibility
+
+<div className="platform-compatibility">
+
+| Android | iOS | Web |
+| ------- | --- | --- |
+| ✅      | ✅  | ✅  |
+
+</div>

packages/docs-reanimated/src/examples/UseHandlerEventExample.tsx

@@ -1,16 +1,18 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import Animated, {
   useHandler,
   useEvent,
   useSharedValue,
   useAnimatedProps,
   type ScrollEvent,
 } from 'react-native-reanimated';
+import { useColorScheme } from '@mui/material';
 import { TextInput, SafeAreaView, View, StyleSheet } from 'react-native';
 
 const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
 
 function UseHandlerExample() {
+  const { colorScheme } = useColorScheme();
   const offsetY = useSharedValue(0);
 
   const handlers = {
@@ -43,6 +45,9 @@ function UseHandlerExample() {
 
   const BRAND_COLORS = ['#fa7f7c', '#b58df1', '#ffe780', '#82cab2', '#87cce8'];
 
+  const textColor =
+    colorScheme === 'light' ? styles.darkText : styles.lightText;
+
   const content = BRAND_COLORS.map((color, index) => (
     <View
       key={index}
@@ -60,7 +65,7 @@ function UseHandlerExample() {
       <AnimatedTextInput
         animatedProps={animatedProps}
         editable={false}
-        style={styles.header}
+        style={[styles.header, textColor]}
       />
       <Animated.ScrollView onScroll={scrollHandler}>
         <View style={styles.container}>{content}</View>
@@ -77,12 +82,10 @@ const styles = StyleSheet.create({
     height: 350,
   },
   header: {
-    backgroundColor: '#f8f9ff',
     paddingVertical: 16,
     paddingHorizontal: 32,
     textAlign: 'center',
     fontFamily: 'Aeonik',
-    color: '#001a72',
     marginTop: '-1px',
   },
   section: {
@@ -91,4 +94,10 @@ const styles = StyleSheet.create({
     marginVertical: 10,
     marginHorizontal: 20,
   },
+  lightText: {
+    color: '#001a72',
+  },
+  darkText: {
+    color: '#f8f9ff',
+  },
 });