Skip to content

Custom ref produces type error with typescript #117

@phlmn

Description

@phlmn

Consider the example from the README:

import useResizeObserver from 'use-resize-observer';
import { useRef } from 'react';

const ref = useRef<HTMLDivElement>(null);
const { width, height } = useResizeObserver<HTMLDivElement>({ ref });

This produces this error when run with strict null checks error:

npx tsc --skipLibCheck --noEmit --strictNullChecks resize-observer.ts
resize-observer.ts:5:63 - error TS2322: Type 'RefObject<HTMLDivElement | null>' is not assignable to type 'HTMLDivElement | RefObject<HTMLDivElement> | null | undefined'.
  Type 'RefObject<HTMLDivElement | null>' is not assignable to type 'RefObject<HTMLDivElement>'.
    Type 'HTMLDivElement | null' is not assignable to type 'HTMLDivElement'.
      Type 'null' is not assignable to type 'HTMLDivElement'.

5 const { width, height } = useResizeObserver<HTMLDivElement>({ ref });
                                                                ~~~


Found 1 error in resize-observer.ts:5

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions