Skip to content

Export props interfaces/types #2156

Description

@ArsenyYankovsky
  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

I'm trying to build a reusable graph component that allows passing props in the Area component inside. To describe its props it would be very useful to just use the props type from the library.

I tried using React.ComponentProps but it is incompatible with the prop type and the compilation gives the following error:

No overload matches this call.
  Overload 1 of 2, '(props: Readonly<Props>): Area', gave the following error.
    Type '{ 'aria-activedescendant'?: string | undefined; 'aria-atomic'?: boolean | "false" | "true" | undefined; 'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined; 'aria-busy'?: boolean | ... 2 more ... | undefined; ... 491 more ...; baseLine?: number | ... 1 more ... | undefined; }' is not
 assignable to type 'IntrinsicClassAttributes<Area>'.
      Types of property 'ref' are incompatible.
        Type 'string | ((instance: SVGElement | null) => void) | RefObject<SVGElement> | null | undefined' is not assignable to type 'string | ((instance: Area | null) => void) | RefObject<Area> | null | undefined'.
          Type '(instance: SVGElement | null) => void' is not assignable to type 'string | ((instance: Area | null) => void) | RefObject<Area> | null | undefined'.
            Type '(instance: SVGElement | null) => void' is not assignable to type '(instance: Area | null) => void'.
              Types of parameters 'instance' and 'instance' are incompatible.
                Type 'Area | null' is not assignable to type 'SVGElement | null'.
                  Type 'Area' is missing the following properties from type 'SVGElement': className, ownerSVGElement, viewportElement, addEventListener, and 216 more.
  Overload 2 of 2, '(props: Props, context?: any): Area', gave the following error.
    Type '{ 'aria-activedescendant'?: string | undefined; 'aria-atomic'?: boolean | "false" | "true" | undefined; 'aria-autocomplete'?: "none" | "inline" | "list" | "both" | undefined; 'aria-busy'?: boolean | ... 2 more ... | undefined; ... 491 more ...; baseLine?: number | ... 1 more ... | undefined; }' is not
 assignable to type 'IntrinsicClassAttributes<Area>'.
      Types of property 'ref' are incompatible.
        Type 'string | ((instance: SVGElement | null) => void) | RefObject<SVGElement> | null | undefined' is not assignable to type 'string | ((instance: Area | null) => void) | RefObject<Area> | null | undefined'.
          Type '(instance: SVGElement | null) => void' is not assignable to type 'string | ((instance: Area | null) => void) | RefObject<Area> | null | undefined'.
            Type '(instance: SVGElement | null) => void' is not assignable to type '(instance: Area | null) => void'. 

It will make it much easier if I could just import the prop types from Recharts.

What does the proposed API look like?

import { Area, AreaProps } from 'recharts'

Metadata

Metadata

Assignees

No one assigned

    Labels

    typescriptPRs or Issues surrounding Types or TS refactoring

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions