Typescript react not supported？

[luojinghui]

Typescript react not supported？

[ghost]

Works for me.

[sunknudsen]

@george-dotdev What type definitions are you using?

[ghost]

@sunknudsen Hmm actually I'm not sure. I think I made a mistake when I commented on here. Sorry

[JohannesMerkt]

I added this type definition to my project and it works:

declare module "react-lazy-load" { import { Component, ReactNode } from "react";

export interface LazyLoadProps {
    className?: string;
    height?: number | string;
    width?: number | string;
    debounce?: boolean;
    elementType?: string;
    offset?: number;
    offsetBottom?: number;
    offsetHorizontal?: number;
    offsetLeft?: number;
    offsetRight?: number;
    offsetTop?: number;
    offsetVertical?: number;
    threshold?: number;
    children?: ReactNode;
    throttle?: number | boolean;
    onContentVisible?: Function;
}

export default class LazyLoad extends Component<LazyLoadProps> {
    constructor(props: LazyLoad);
}

}

And sorry code formating in the comment didnt work somehow

[grafluxe]

Thanks for sharing the type declarations @JohannesMerkt. I made some updates to your logic:

1. Replaced onContentVisible?: Function; with onContentVisible?: () => void;
2. Replaced the class with a React function component

declare module "react-lazy-load" {
  import { FC, ReactNode } from "react";

  interface Props {
    className?: string;
    height?: number | string;
    width?: number | string;
    debounce?: boolean;
    elementType?: string;
    offset?: number;
    offsetBottom?: number;
    offsetHorizontal?: number;
    offsetLeft?: number;
    offsetRight?: number;
    offsetTop?: number;
    offsetVertical?: number;
    threshold?: number;
    children?: ReactNode;
    throttle?: number | boolean;
    onContentVisible?: () => void;
  }

  const LazyLoad: FC<Props> = (props) => {};

  export default LazyLoad;
}

[JohannesMerkt]

@grafluxe aweseome! Thanks for sharing it.

[loktar00]

Hah I just noticed this after working on converting this library to TS, fortunately the types were pretty straight forward, exactly what I came up with as well.

https://github.com/loktar00/react-lazy-load/tree/feature/update-to-18

[loktar00]

Should be fixed with 4.0 and #155