Giters

wellyshen / react-cool-inview

😎 🖥️ React hook to monitor an element enters or leaves the viewport (or another element).

Home Page:https://react-cool-inview.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

README should include TypeScript examples

bradydowling opened this issue · comments

commented

Bug Report

Describe the Bug

There are good examples in the README but it's tough to tell how to get this working in TypeScript. There is an example in the demo folder but this doesn't run immediately in CodeSandbox so it's a little challenging to find it from there.

Since most refs from the hook will be used on divs, it would be helpful to have documentation in the README about the generic you can pass to make this work. Otherwise, you'll end up getting:

Type 'RefObject<HTMLElement>' is not assignable to type 'string | ((instance: HTMLDivElement | null) => void) | RefObject<HTMLDivElement> | null | undefined'.
  Type 'RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDivElement>'.
    Property 'align' is missing in type 'HTMLElement' but required in type 'HTMLDivElement'.  TS2322

How to Reproduce

Use useInView in TypeScript without providing a generic.

commented

@bradydowling Thank you, I will add it soon.

commented

@bradydowling I have added the related example, thank you :)