@granite-js/react-native 0.0.1

package/src/impression-area/ImpressionArea.tsx

@@ -0,0 +1,341 @@
+import { debounce } from 'es-toolkit';
+import { PropsWithChildren, ReactElement, ReactNode, useContext, useEffect, useMemo, useState } from 'react';
+import { StyleProp, View, ViewStyle } from 'react-native';
+import { InView, IOContext } from '../intersection-observer';
+import { noop } from '../utils/noop';
+import { usePreservedCallback } from '../utils/usePreservedCallback';
+import { useVisibility } from '../visibility';
+
+interface Props {
+  onImpressionStart?: () => void;
+  onImpressionEnd?: () => void;
+  enabled?: boolean;
+  UNSAFE__impressFallbackOnMount?: boolean;
+  style?: StyleProp<ViewStyle>;
+  areaThreshold?: number;
+  timeThreshold?: number;
+  children?: ReactNode;
+}
+
+/**
+ * @public
+ * @category Screen Control
+ * @name ImpressionArea
+ * @description
+ * A component that detects whether a specific component is visible on the screen and notifies the outside. Using this component, you can easily implement features like collecting logs or running animations when a specific component becomes visible on the screen.
+ * The visibility is detected using the return value of `useVisibility` and the `IOScrollView` and `InView` components that indicate whether the component is displayed within the viewport. When using `ScrollView` in React, even if a view is not visible on the screen, using `ImpressionArea` allows you to trigger events only when the view is actually visible on the screen.
+
+::: info Note
+
+`ImpressionArea` must be used inside `IOScrollView`. If you need to use it outside of `IOScrollView`, you can set the `UNSAFE__impressFallbackOnMount` property to `true` to detect based on when the component is mounted. If this property is set to `false` and used outside of `IOScrollView`, an `IOProviderMissingError` will occur.
+
+:::
+ *
+ * @param {() => void} [onImpressionStart] Callback function that is executed when the child component becomes visible on the screen.
+ * @param {() => void} [onImpressionEnd] Callback function that is executed when the child component is hidden from the screen.
+ * @param {boolean} [enabled=true] Value that directly controls the condition for visibility. Default value is `true`. If passed as `false`, the `onImpressionStart` callback function will not be executed even if the component is visible.
+ * @param {number} [areaThreshold=0] Value that sets the ratio of the visible area. If the component appears on the screen with a ratio greater than this value, `onImpressionStart` is called.
+ * The value should be set between 0 and 1. Setting it to 0 triggers the event when even 1px of the component is visible. Conversely, setting it to 1 only triggers the event when the component is 100% visible on the screen.
+ * @param {number} [timeThreshold=0] Sets the time in milliseconds before `onImpressionStart` is called after this component becomes visible on the screen. Default value is `0` milliseconds (0 seconds).
+ * @param {ViewStyle} [style] `style` value to be applied to the `InView` component. Default value is `undefined`, used when you want to specify a style.
+ * @param {boolean} [UNSAFE__impressFallbackOnMount=false] Whether to consider the component as visible immediately when mounted. Default value is `false`.
+ * Useful when you cannot determine if the component is in the viewport without using `IOScrollView`. For example, a component located outside of `IOScrollView` will be considered visible at mount time if set to `true`.
+ *
+ * @returns {ReactElement} - Returns a component that can detect visibility on the screen.
+ * @example
+ * 
+ * ### Basic Usage Example
+ * 
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Button, Dimensions, Text, View } from 'react-native';
+ * import { ImpressionArea, IOScrollView } from '@granite-js/react-native';
+ * 
+ * export default function ImpressionAreaExample() {
+ *  const [isImpressionStart, setIsImpressionStart] = useState(false);
+ * 
+ *  return (
+ *    <>
+ *      <Text>{isImpressionStart ? 'Impression Start' : 'Impression End'}</Text>
+ *        <IOScrollView
+ *          style={{
+ *            flex: 1,
+ *            margin: 16,
+ *            backgroundColor: 'white',
+ *          }}
+ *        >
+ *        <View
+ *          style={{
+ *            height: Dimensions.get('screen').height,
+ *            borderWidth: 1,
+ *            borderColor: 'black',
+ *          }}
+ *        >
+ *          <Text>Scroll to here</Text>
+ *        </View>
+ * 
+ *        <ImpressionArea
+ *          onImpressionStart={() => setIsImpressionStart(true)}
+ *          onImpressionEnd={() => setIsImpressionStart(false)}
+ *        >
+ *          <Button title="Button" />
+ *        </ImpressionArea>
+ *      </IOScrollView>
+ *    </>
+ *  );
+ * }
+ * ```
+ *
+ * ### Example of Detection at Mount Time
+ * 
+ * When `ImpressionArea` is not located inside a component like `IOScrollView`, setting `UNSAFE__impressFallbackOnMount` to `true` will consider the component as visible when it is mounted.
+ * 
+ * ```tsx
+ * import { useState } from 'react';
+ * import { Button, Dimensions, ScrollView, Text, View } from 'react-native';
+ * import { ImpressionArea } from '@granite-js/react-native';
+ * 
+ * export default function ImpressionArea2Example() {
+ *  const [isImpressionStart, setIsImpressionStart] = useState(false);
+ * 
+ *  return (
+ *    <>
+ *      <Text>{isImpressionStart ? 'Impression Start' : 'Impression End'}</Text>
+ *      <ScrollView
+ *        style={{
+ *          flex: 1,
+ *          margin: 16,
+ *          backgroundColor: 'white',
+ *        }}
+ *      >
+ *        <View
+ *          style={{
+ *            height: Dimensions.get('screen').height,
+ *            borderWidth: 1,
+ *            borderColor: 'black',
+ *          }}
+ *        >
+ *          <Text>Scroll to here</Text>
+ *        </View>
+ * 
+ *        <ImpressionArea
+ *          UNSAFE__impressFallbackOnMount={true}
+ *          onImpressionStart={() => setIsImpressionStart(true)}
+ *          onImpressionEnd={() => setIsImpressionStart(false)}
+ *        >
+ *          <Button title="Button" />
+ *        </ImpressionArea>
+ *      </ScrollView>
+ *    </>
+ *  );
+ * }
+ * ```
+ */
+export function ImpressionArea(props: Props): ReactElement {
+  const context = useContext(IOContext);
+
+  if (context?.manager == null && props.UNSAFE__impressFallbackOnMount) {
+    return <ImpressionAreaOnMount {...props} />;
+  }
+
+  return <ImpressionAreaWithIntersectionObserver {...props} />;
+}
+
+export class IOProviderMissingError extends Error {
+  message =
+    'ImpressionArea가 IOContext.Provider 밖에서 사용되었습니다. ' +
+    '최상위 ScrollView가 @granite-js/react-native의 IOScrollView인지 확인해주세요.';
+}
+
+/**
+ * @category Components
+ * @kind function
+ * @name ImpressionAreaOnMount
+ * @description
+ * A component that calls `onImpressionStart` and `onImpressionEnd` when the component is mounted on the screen.
+ * Used when `UNSAFE__impressFallbackOnMount` is `true` in `ImpressionArea`.
+ * This component can be used when `ImpressionArea` is needed outside of `IOScrollView`.
+ *
+ * @param {() => void} [onImpressionStart] - Callback function that is called when the component is mounted.
+ * @param {() => void} [onImpressionEnd] - Callback function that is called when the component is unmounted.
+ * @param {StyleProp<ViewStyle>} [style] - Sets the style of the top-level container of the `ImpressionAreaOnMount` component.
+ * @param {ReactNode} [children] - Sets the child components to be wrapped by `ImpressionAreaOnMount`.
+ * @returns {ReactElement} - Returns a component that detects mount status
+ * @example
+ * ### Example of Detection at Mount Time
+ * ```tsx
+ * import { ImpressionAreaOnMount } from '@granite-js/react-native';
+ *
+ * export default function AlwaysImpressionAreaPage() {
+ *   // isImpressionStart is set to true when AlwaysImpressionAreaPage is mounted
+ *   const [isImpressionStart, setIsImpressionStart] = useState(false);
+ *
+ *   return (
+ *     <ScrollView
+ *       style={{
+ *         flex: 1,
+ *         padding: 16,
+ *         backgroundColor: 'white',
+ *       }}
+ *     >
+ *       <TestTitle title="ImpressionArea" description="@granite-js/impression-area" />
+ *       <Button label={'Scroll to origin'} onPress={() => {}} />
+ *       <Code style={{ width, height }} json={{ isImpressionStart }} />
+ *       <ImpressionAreaOnMount
+ *         onImpressionStart={() => setIsImpressionStart(true)}
+ *         onImpressionEnd={() => setIsImpressionStart(false)}
+ *       >
+ *         <Button label={'Scroll to here'} onPress={() => {}} />
+ *       </ImpressionArea>
+ *     </ScrollView>
+ *   );
+ * }
+ * ```
+ */
+export function ImpressionAreaOnMount({
+  onImpressionStart: _onImpressionStart = noop,
+  onImpressionEnd: _onImpressionEnd = noop,
+  style,
+  children,
+}: PropsWithChildren<Props>): ReactElement {
+  const visible = useVisibility();
+
+  const isImpressed = visible;
+
+  const onImpressionStart = usePreservedCallback(_onImpressionStart);
+  const onImpressionEnd = usePreservedCallback(_onImpressionEnd);
+
+  useEffect(() => {
+    if (isImpressed) {
+      onImpressionStart();
+    } else {
+      onImpressionEnd();
+    }
+  }, [isImpressed, onImpressionStart, onImpressionEnd]);
+
+  return <View style={style}>{children}</View>;
+}
+
+/**
+ * @category Components
+ * @kind function
+ * @name ImpressionAreaWithIntersectionObserver
+ * @description
+ * A component that calls `onImpressionStart` and `onImpressionEnd` based on whether the component is visible on the user's screen.
+ * This is a component that can be used in `IOScrollView` and can notify the outside about its visibility status.
+ *
+ * @param {() => void} [onImpressionStart] - Callback function that is called when the component becomes visible on the screen.
+ * @param {() => void} [onImpressionEnd] - Callback function that is called when the component disappears from the screen.
+ * @param {boolean} [enabled=true] - Sets whether to enable `ImpressionArea`.
+ * @param {StyleProp<ViewStyle>} [style] - Sets the style of the top-level container of the `ImpressionAreaWithIntersectionObserver` component.
+ * @param {number} [areaThreshold=0] - Considers the component visible when its visible area exceeds the set ratio.
+ * @param {number} [timeThreshold=0] - Sets the time in milliseconds before `onImpressionStart` and `onImpressionEnd` are called after the component becomes visible on the screen. Default value is `0` milliseconds.
+ * @param {ReactNode} [children] - Sets the child components to be wrapped by `ImpressionAreaWithIntersectionObserver`.
+ * @returns {ReactElement} - Returns a component that can detect visibility on the screen.
+ * @example
+ * ### Example using IntersectionObserver
+ * ```tsx
+ * import { ImpressionAreaWithIntersectionObserver, IOScrollView } from '@granite-js/react-native';
+ *
+ * export default function ImpressionAreaPage() {
+ *   const [isImpressionStart, setIsImpressionStart] = useState(false);
+ *
+ *   return (
+ *     <IOScrollView
+ *       style={{
+ *         flex: 1,
+ *         margin: 16,
+ *         backgroundColor: 'white',
+ *       }}
+ *     >
+ *       <TestTitle title="ImpressionArea" description="@granite-js/impression-area" />
+ *       <Button label={'Scroll to origin'} onPress={() => {}} />
+ *       <Code style={{ width, height }} textStyle={{ flex: 1, verticalAlign: 'middle' }} json={{ isImpressionStart }} />
+ *       <ImpressionAreaWithIntersectionObserver
+ *         onImpressionStart={() => setIsImpressionStart(true)}
+ *         onImpressionEnd={() => setIsImpressionStart(false)}
+ *       >
+ *         <Button label={'Scroll to here'} onPress={() => {}} />
+ *       </ImpressionArea>
+ *     </IOScrollView>
+ *   );
+ * }
+ * ```
+ */
+export function ImpressionAreaWithIntersectionObserver({
+  onImpressionStart: _onImpressionStart = noop,
+  onImpressionEnd: _onImpressionEnd = noop,
+  timeThreshold = 0,
+  ...props
+}: PropsWithChildren<{
+  onImpressionStart?: () => void;
+  onImpressionEnd?: () => void;
+  enabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  areaThreshold?: number;
+  timeThreshold?: number;
+}>): ReactElement {
+  const [isImpressed, setIsImpressed] = useState(false);
+
+  const onImpressionChange = useMemo(() => {
+    if (timeThreshold === 0) {
+      return setIsImpressed;
+    } else {
+      return debounce(setIsImpressed, timeThreshold);
+    }
+  }, [setIsImpressed, timeThreshold]);
+
+  const onImpressionStart = usePreservedCallback(_onImpressionStart);
+  const onImpressionEnd = usePreservedCallback(_onImpressionEnd);
+
+  useEffect(() => {
+    if (isImpressed) {
+      onImpressionStart?.();
+    } else {
+      onImpressionEnd?.();
+    }
+  }, [isImpressed, onImpressionStart, onImpressionEnd]);
+
+  return <ImpressionAreaImpl {...props} onImpressionChange={onImpressionChange} />;
+}
+
+function ImpressionAreaImpl({
+  children,
+  onImpressionChange: _onImpressionChange = noop,
+  enabled = true,
+  areaThreshold = 0,
+  style,
+}: PropsWithChildren<{
+  onImpressionChange?: (isImpressed: boolean) => void;
+  enabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  areaThreshold?: number;
+}>) {
+  const visible = useVisibility();
+  const [inviewImpressed, setInviewImpressed] = useState(false);
+
+  const context = useContext(IOContext);
+
+  if (context?.manager == null) {
+    throw new IOProviderMissingError();
+  }
+
+  const impressed = visible && inviewImpressed && enabled;
+  const onImpressionChange = usePreservedCallback(_onImpressionChange);
+
+  useEffect(() => {
+    onImpressionChange?.(impressed);
+  }, [impressed, onImpressionChange]);
+
+  return (
+    <InView
+      onChange={(inView, currentThreshold) => {
+        const isVisible = inView && currentThreshold >= areaThreshold;
+        setInviewImpressed(isVisible);
+      }}
+      style={style}
+    >
+      {children}
+    </InView>
+  );
+}

package/src/impression-area/index.ts

@@ -0,0 +1 @@
+export * from './ImpressionArea';

package/src/index.ts

@@ -0,0 +1,19 @@
+import './types/global';
+
+export { Granite } from './app';
+export * from '@granite-js/style-utils';
+export * from '@granite-js/image';
+export * from './dev-entrypoint';
+export * from './native-modules/natives';
+export * from './visibility';
+export * from './use-back-event';
+export * from './keyboard';
+export * from './intersection-observer';
+export * from './impression-area';
+export * from './scroll-view-inertial-background';
+export * from './react';
+export * from './router/createRoute';
+export * from './event';
+
+export type { InitialProps, ColorPreference } from './initial-props';
+export type { GraniteProps } from './app';

package/src/initial-props/InitialProps.ts

@@ -0,0 +1,144 @@
+/**
+ * @public
+ * @category UI
+ * @name ColorPreference
+ * @description
+ * Type representing the color mode of the current device. It is a string representing light mode and dark mode.
+ *
+ * @typedef {'light' | 'dark'} ColorPreference
+ */
+export type ColorPreference = 'light' | 'dark';
+
+/**
+ * @name NetworkStatus
+ * @description
+ * Type representing the network status.
+ *
+ * @typedef {'WIFI' | '2G' | '3G' | '4G' | '5G' | 'UNKNOWN' | 'OFFLINE'} NetworkStatus
+ */
+type NetworkStatus = 'WIFI' | '2G' | '3G' | '4G' | '5G' | 'UNKNOWN' | 'OFFLINE';
+
+/**
+ * @category Types
+ * @name BaseInitialProps
+ * @description
+ * Interface representing the base initial properties.
+ *
+ * @interface
+ * @property {'ios' | 'android'} platform - Platform type
+ * @property {string} appVersion - App version
+ * @property {ColorPreference} initialColorPreference - Initial color
+ * @property {NetworkStatus} networkStatus - Network status
+ * @property {number} loadingStartTs - Timestamp when ReactNativeView started rendering in native
+ * @property {string} [scheme] - Executed scheme
+ */
+type BaseInitialProps = {
+  platform: 'ios' | 'android';
+  appVersion: string;
+  initialColorPreference: ColorPreference;
+  networkStatus: NetworkStatus;
+  loadingStartTs: number;
+  scheme?: string;
+};
+
+/**
+ * @category Types
+ * @name AndroidInitialProps
+ * @description
+ * Values passed from Android to React Native.
+ *
+ * @interface
+ * @augments BaseInitialProps
+ * @property {'android'} platform - Platform name (Android)
+ * @property {string} initialFontScale - Font scale set on the device
+ * @property {string} distributionGroup - Distribution group
+ */
+export type AndroidInitialProps = BaseInitialProps & {
+  platform: 'android';
+  initialFontScale: string;
+  distributionGroup: string;
+};
+
+/**
+ * @category Types
+ * @name IOSInitialProps
+ * @description
+ * Interface representing iOS initial properties.
+ *
+ * @interface
+ * @augments BaseInitialProps
+ * @property {'ios'} platform - Platform (iOS)
+ * @property {IOSFontSizeType} initialFontSize - Initial font size
+ * @property {boolean} isVisible - Visibility status
+ */
+export type IOSInitialProps = BaseInitialProps & {
+  platform: 'ios';
+  initialFontSize: IOSFontSizeType;
+  isVisible: boolean;
+};
+
+/**
+ * @category Types
+ * @name IOSFontSizeType
+ * @description
+ * Type representing iOS font size type.
+ *
+ * @typedef {'xSmall' | 'Small' | 'Medium' | 'Large' | 'xLarge' | 'xxLarge' | 'xxxLarge' | 'A11y_Medium' | 'A11y_Large' | 'A11y_xLarge' | 'A11y_xxLarge' | 'A11y_xxxLarge'} IOSFontSizeType
+ */
+type IOSFontSizeType =
+  | 'xSmall'
+  | 'Small'
+  | 'Medium'
+  | 'Large'
+  | 'xLarge'
+  | 'xxLarge'
+  | 'xxxLarge'
+  | 'A11y_Medium'
+  | 'A11y_Large'
+  | 'A11y_xLarge'
+  | 'A11y_xxLarge'
+  | 'A11y_xxxLarge';
+
+/**
+ * @public
+ * @category Core
+ * @name InitialProps
+ * @description
+ * Provides the initial data type that native platforms (Android/iOS) pass to the app when a user enters a specific screen in a React Native app.
+ * The initial data contains important information used for screen initialization, and the required data types differ by native platform.
+ *
+ * The data type provided by Android is `AndroidInitialProps`, and the data type provided by iOS is `IOSInitialProps`.
+ *
+ * @property {'ios' | 'android'} platform - The platform on which the app is currently running. Has a value of either `ios` or `android`.
+ * @property {ColorPreference} initialColorPreference - The initial color theme. Represents the color theme set by the user.
+ * @property {NetworkStatus} networkStatus - The current device's network connection status and connected network.
+ * @property {string} [scheme] - The URL scheme used to enter the current screen.
+ * @property {`xSmall` | `Small` | `Medium` | `Large` | `xLarge` | `xxLarge` | `xxxLarge` | `A11y_Medium` | `A11y_Large` | `A11y_xLarge` | `A11y_xxLarge` | `A11y_xxxLarge`} initialFontSize (iOS only) iOS system font size. Each value represents a specific font size. Default value is `Large`.
+ * @property {boolean} isVisible (iOS only) Whether the screen is currently visible in iOS. Initial value is passed as `true`.
+ * @property {string} initialFontScale (Android only) Android system font scale. The font size scale adjusted by the user in Android device's accessibility settings. This value is multiplied by the base font size to determine the final font size.
+ *
+ * @example
+ *
+ * ### Example using `InitialProps`
+ *
+ * ::: code-group
+ * ```tsx [_app.tsx]
+ * import { PropsWithChildren } from 'react';
+ * import { Granite, InitialProps } from '@granite-js/react-native';
+ * import { context } from '../require.context';
+ *
+ * const APP_NAME = 'my-app-name';
+ *
+ * function AppContainer({ children, ...initialProps }: PropsWithChildren<InitialProps>) {
+ *   console.log({ initialProps });
+ *   return <>{children}</>;
+ * }
+ *
+ * export default Granite.registerApp(AppContainer, {
+ *   appName: APP_NAME,
+ *   context,
+ * });
+ * :::
+ * ```
+ */
+export type InitialProps = AndroidInitialProps | IOSInitialProps;

package/src/initial-props/index.ts

@@ -0,0 +1 @@
+export * from './InitialProps';

package/src/intersection-observer/IOContext.ts

@@ -0,0 +1,16 @@
+import { createContext } from 'react';
+import IOManager from './IOManager';
+
+export interface IOContextValue {
+  manager: null | IOManager;
+}
+
+/**
+ * @name IOContext
+ * @description Context that shares the IOManager instance.
+ */
+const IOContext = createContext<IOContextValue>({
+  manager: null,
+});
+
+export default IOContext;

package/src/intersection-observer/IOFlatList.ts

@@ -0,0 +1,72 @@
+import { RefAttributes } from 'react';
+import { FlatList, FlatListProps } from 'react-native';
+import withIO, { IOComponentProps } from './withIO';
+
+export type IOFlatListController = FlatList;
+
+export type IOFlatListProps<ItemT = any> = IOComponentProps & FlatListProps<ItemT>;
+
+/**
+ * @public
+ * @category Screen Control
+ * @name IOFlatList
+ * @description
+ * `IOFlatList` is a `FlatList` component with added Intersection Observer functionality to detect when specific elements become visible or disappear from the screen during scrolling. Using this component, you can easily check and handle whether each item in the list is visible on the screen.
+ *
+ * When used with `InView`, you can check the exposure status of each element. The [InView](/reference/react-native/Screen%20Control/InView) component included as a child element detects whether the element is visible on the screen through the observation functionality of `IOFlatList` and triggers events based on the exposure status.
+ *
+ * @example
+ *
+ * You can check whether each item in the list appears on the screen using `IOFlatList`.
+ * When each item in the list appears on the screen, the `InView` component changes to the `visible` state.
+ *
+ * ```tsx
+ * import { ReactNode, useState } from 'react';
+ * import { StyleSheet, Text, View } from 'react-native';
+ * import { InView, IOFlatList } from '@granite-js/react-native';
+ *
+ * const mockData = Array.from({ length: 30 }, (_, i) => ({ key: String(i) }));
+ *
+ * export default function FlatListPage() {
+ *  return <IOFlatList data={mockData} renderItem={({ item }) => <InViewItem>{item.key}</InViewItem>} />;
+ * }
+ *
+ * function InViewItem({ children }: { children: ReactNode }) {
+ *  const [visible, setVisible] = useState(false);
+ *
+ *  return (
+ *    <InView onChange={setVisible}>
+ *      <View style={styles.item}>
+ *        <Text>{children}</Text>
+ *        <Text>{visible ? 'visible' : ''}</Text>
+ *      </View>
+ *    </InView>
+ *  );
+ * }
+ *
+ * const styles = StyleSheet.create({
+ *  item: {
+ *    padding: 16,
+ *    borderBottomWidth: 1,
+ *    borderBottomColor: '#ddd',
+ *  },
+ * });
+ * ```
+ */
+const IOFlatList = withIO(FlatList, [
+  'flashScrollIndicators',
+  'getNativeScrollRef',
+  'getScrollResponder',
+  'getScrollableNode',
+  'scrollToEnd',
+  'scrollToIndex',
+  'scrollToItem',
+  'scrollToOffset',
+]) as unknown as typeof IOFlatListFunction;
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+declare function IOFlatListFunction<ItemT = any>(
+  props: IOFlatListProps<ItemT> & RefAttributes<IOFlatListController>
+): JSX.Element;
+
+export default IOFlatList;

package/src/intersection-observer/IOManager.ts

@@ -0,0 +1,73 @@
+import IntersectionObserver, {
+  IntersectionObserverOptions,
+  IntersectionObserverEntry,
+  Element,
+} from './IntersectionObserver';
+
+export type ObserverInstanceCallback = (inView: boolean, intersectionRatio: number) => void;
+
+export interface ObserverInstance {
+  readonly callback: ObserverInstanceCallback;
+  readonly element: Element;
+  readonly observerId: number;
+  readonly observer: IntersectionObserver;
+}
+
+/**
+ * @kind class
+ * @name IOManager
+ * @description A class that tracks the visibility of DOM elements using `IntersectionObserver` instances and executes callbacks when elements enter or leave the viewport.
+ * This class makes it easy to manage multiple elements and execute custom logic based on the visibility status of each element.
+ */
+class IOManager {
+  io: IntersectionObserver;
+  observerId: number;
+  instanceMap: Map<Element, ObserverInstance> = new Map();
+
+  constructor(options: IntersectionObserverOptions) {
+    this.io = new IntersectionObserver(this.handleChange, options);
+    this.observerId = 0;
+  }
+
+  handleChange = (entries: IntersectionObserverEntry[]) => {
+    for (let index = 0; index < entries.length; index += 1) {
+      const entry = entries[index];
+
+      if (entry == null) {
+        continue;
+      }
+
+      const { target, isIntersecting, intersectionRatio } = entry;
+      const instance = this.instanceMap.get(target);
+      if (instance) {
+        instance.callback(isIntersecting, intersectionRatio);
+      }
+    }
+  };
+
+  observe(element: Element, callback: ObserverInstanceCallback): ObserverInstance {
+    const existInstance = this.instanceMap.get(element);
+    if (existInstance) {
+      return existInstance;
+    }
+    this.observerId += 1;
+    const instance: ObserverInstance = {
+      callback,
+      element,
+      observerId: this.observerId,
+      observer: this.io,
+    };
+    this.instanceMap.set(element, instance);
+    this.io.observe(element);
+    return instance;
+  }
+
+  unobserve(element: any) {
+    if (this.instanceMap.has(element)) {
+      this.instanceMap.delete(element);
+      this.io.unobserve(element);
+    }
+  }
+}
+
+export default IOManager;