Merge pull request #8 from Devlander-Software/create-npm-package

Create npm package

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devlander/higher-order-components",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "description": "A comprehensive collection of higher-order components for React and React Native projects, enhancing functionality and development efficiency.",
   "main": "dist/umd/index.js",
   "module": "dist/esm/index.js",
@@ -137,7 +137,7 @@
     "typedoc": "^0.26.5"
   },
   "dependencies": {
-    "@devlander/hooks": "^0.0.204",
+    "@devlander/hooks": "^0.0.208",
     "@devlander/styled-components-theme": "^1.1.254",
     "@devlander/utils": "^0.0.49",
     "@stylexjs/stylex": "^0.7.5",

src/hocs/withVisibilitySensor/withVisibilitySensor.hoc.tsx

@@ -1,23 +1,51 @@
-import { useVisibilitySensor } from "@devlander/hooks"
+import type { UseVisibilityOptionsConfig } from "@devlander/hooks"
+import { useVisibilitySensor, VisibilityOffset } from "@devlander/hooks"
 import type { ComponentType, Ref } from "react"
-import React, { forwardRef, useState } from "react"
+import React, { forwardRef, useState, useMemo } from "react"
 import { View, Platform } from "react-native"
 
+// Check if we are running on the web platform
 const isWeb = Platform.OS === "web"
 
-type WithVisibilitySensorProps = {
+// Default prop values
+const defaultVisibilityOffset = VisibilityOffset.FULL
+const defaultCheckInterval = 1000
+const defaultStopWatching = false
+
+interface WithVisibilitySensorProps {
   isVisible: boolean
+  visibilityOffset?: VisibilityOffset
+  checkInterval?: number
+  stopWatching?: boolean
 }
 
 export function withVisibilitySensor<P>(
   WrappedComponent: ComponentType<P & WithVisibilitySensorProps>,
 ) {
-  const WithVisibilitySensorComponent = (props: P, ref: Ref<any>) => {
+  const WithVisibilitySensorComponent = (
+    props: P & WithVisibilitySensorProps,
+    ref: Ref<any>,
+  ) => {
     const [isVisible, setIsVisible] = useState(false)
-    const visibilitySensorRef = useVisibilitySensor((visible: boolean) => {
-      setIsVisible(visible)
-    })
 
+    // Memoize config options and allow them to update if props change
+    const visibilityConfig: UseVisibilityOptionsConfig = useMemo(() => {
+      return {
+        visibilityOffset: props.visibilityOffset ?? defaultVisibilityOffset,
+        checkInterval: props.checkInterval ?? defaultCheckInterval,
+      }
+    }, [props.visibilityOffset, props.checkInterval])
+
+    // Create a visibility sensor ref for the platform
+    const visibilitySensorRef = useVisibilitySensor(
+      (visible: boolean) => {
+        setIsVisible(visible)
+      },
+      visibilityConfig,
+      props.stopWatching ?? defaultStopWatching,
+    )
+
+    // Choose the correct container based on platform
     const Container = isWeb ? "div" : View
 
     return (

typings/hocs/withVisibilitySensor/withVisibilitySensor.hoc.d.ts

@@ -1,7 +1,11 @@
+import { VisibilityOffset } from "@devlander/hooks";
 import type { ComponentType } from "react";
 import React from "react";
-type WithVisibilitySensorProps = {
+interface WithVisibilitySensorProps {
     isVisible: boolean;
-};
-export declare function withVisibilitySensor<P>(WrappedComponent: ComponentType<P & WithVisibilitySensorProps>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P> & React.RefAttributes<any>>;
+    visibilityOffset?: VisibilityOffset;
+    checkInterval?: number;
+    stopWatching?: boolean;
+}
+export declare function withVisibilitySensor<P>(WrappedComponent: ComponentType<P & WithVisibilitySensorProps>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & WithVisibilitySensorProps> & React.RefAttributes<any>>;
 export {};