CODEWITHSUNDEEP
reactjstypescriptviewport
Brady Dowling
Brady Dowling

Reputation: 5532

Type error using react-cool-inview ('RefObject<HTMLElement>' is not assignable to type 'RefObject<HTMLDivElement>')

I've installed react-cool-inview using yarn add react-cool-inview.

Then I imported it and used it on a component (MyComponent.tsx):

import React from "react";
import useInView from "react-cool-inview";

const MyComponent = (): JSX.Element => {
  interface onEnterArgs {
    unobserve: () => void;
  }

  const { ref } = useInView({
    onEnter: ({ unobserve }: onEnterArgs) => {
      unobserve();
      console.log("Got it");
    },
  });

  return (
    <div ref={ref}> // lint error on this line
      Hi there
    </div>
  );
};

export default MyComponent;

When running my TypeScript app, I get the following type build error:

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

What could be causing this?

Upvotes: 0

Views: 358

Answers (1)

Linda Paiste
Linda Paiste

Reputation: 42188

useInView is returning a ref for a general HTMLElement, but the div wants a ref that is specifically for a div aka HTMLDivElement.

Fortunately the useInView function accepts a generic variable that you can use to set the type of the element.

const { ref } = useInView<HTMLDivElement>({ ...

This will return the correct type of ref for a div.

Upvotes: 1

Related Questions