allow to use OnScreen without specifying html element type #12

biome.json

@@ -8,6 +8,9 @@
       "recommended": true,
       "correctness": {
         "noUnusedVariables": "warn"
+      },
+      "suspicious": {
+        "noExplicitAny": "off"
       }
     }
   },

lib/OnScreen.tsx

@@ -12,7 +12,7 @@ import { UseOnScreenParameters, useOnScreen } from "./useOnScreen";
 /**
  * OnScreen component own props.
  */
-type OnScreenOwnProps<T extends HTMLElement, AS extends ElementType = ElementType> = {
+type OnScreenOwnProps<T extends HTMLElement = any, AS extends ElementType = ElementType> = {
   /**
    * Render function.
    */
@@ -27,7 +27,7 @@ type OnScreenOwnProps<T extends HTMLElement, AS extends ElementType = ElementTyp
  * OnScreen component props with generic element props.
  */
 export type OnScreenProps<
-  T extends HTMLElement,
+  T extends HTMLElement = any,
   AS extends ElementType = ElementType,
 > = OnScreenOwnProps<T, AS> & Omit<ComponentProps<AS>, keyof OnScreenOwnProps<T, AS>>;
 
@@ -46,7 +46,7 @@ export type OnScreenProps<
  * @param {OnScreenProps} onScreenComponentProps Props.
  * @returns Children elements with on-screen wrapper.
  */
-export const OnScreen = <T extends HTMLElement, AS extends ElementType = ElementType>({
+export const OnScreen = <T extends HTMLElement = any, AS extends ElementType = ElementType>({
   children,
   margin,
   threshold,

lib/useOnScreen.tsx

@@ -3,7 +3,7 @@ import { RefObject, useEffect, useState } from "react";
 /**
  * UseOnScreen hook settings.
  */
-export type UseOnScreenParameters<T extends HTMLElement = HTMLElement> = {
+export type UseOnScreenParameters<T extends HTMLElement = any> = {
   /**
    * Target React element ref.
    */
@@ -46,7 +46,7 @@ export type UseOnScreenParameters<T extends HTMLElement = HTMLElement> = {
  * @param {UseOnScreenParameters} useOnScreenParameters - Parameters.
  * @returns .
  */
-export const useOnScreen = <T extends HTMLElement>({
+export const useOnScreen = <T extends HTMLElement = any>({
   ref,
   threshold = 0,
   once = false,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ukorvl/react-on-screen",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "Lightweight typescript library to detect React elements visibility",
   "license": "MIT",
   "author": "ukorvl",