allow to use OnScreen without specifying html element type #12

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> = {
   /**
    * Target React element ref.
    */

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",