Skip to content

TypeScript: Spreading props creates ref type bug #187

@Sir-hennihau

Description

@Sir-hennihau

What is the current behavior?
Prop types are bugged. Spreading its props into itself gives a weird error about ref.

Type '{ children: ReactNode; wrapperProps: { renderer: ({ elementRef, style, ...restProps }: PropsWithChildren<ElementPropsWithElementRef<HTMLDivElement>>) => Element; }; ... 409 more ...; onUpdate?: ((scrollValues: ScrollState, prevScrollState: ScrollState) => void) | undefined; }' is not assignable to type 'IntrinsicClassAttributes<Scrollbar>'.
  Types of property 'ref' are incompatible.
    Type 'LegacyRef<HTMLDivElement> | undefined' is not assignable to type 'LegacyRef<Scrollbar> | undefined'.
      Type '(instance: HTMLDivElement | null) => void' is not assignable to type 'LegacyRef<Scrollbar> | undefined'.
        Type '(instance: HTMLDivElement | null) => void' is not assignable to type '(instance: Scrollbar | null) => void'.
          Types of parameters 'instance' and 'instance' are incompatible.
            Type 'Scrollbar | null' is not assignable to type 'HTMLDivElement | null'.
              Type 'Scrollbar' is missing the following properties from type 'HTMLDivElement': align, addEventListener, removeEventListener, accessKey, and 227 more.  TS2322

Steps to reproduce it and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have extra dependencies other than react-scrollbars-custom. Paste the link to your JSFiddle or CodeSandbox example below:

import ReactScrollbarsCustom, { ScrollbarProps } from "react-scrollbars-custom";

export const CustomScrollbars = (props: ScrollbarProps) => {
    return <ReactScrollbarsCustom {...props}></ReactScrollbarsCustom>;
};

What is the expected behavior?
No Typescript error

A little about versions:

  • OS: Ubuntu
  • React: 17.0.2
  • react-scrollbars-custom: 4.0.25

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