Export props interfaces/types for Legend and Line

[siddharthp-ironfort]

I am trying to export LegendProps and LineProps from recharts but while using <Legend {..props}/> and <Line {..props} />. I am getting following error.

No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): Legend', gave the following error.
    Type '{ content?: ContentType | undefined; iconSize?: number | undefined; iconType?: IconType | undefined; layout?: LayoutType | undefined; align?: HorizontalAlignmentType | undefined; ... 480 more ...; onBBoxUpdate?: ((box: DOMRect | null) => void) | undefined; }' is not assignable to type 'IntrinsicClassAttributes<Legend>'.
      Types of property 'ref' are incompatible.
        Type 'LegacyRef<ReactElement<any, string | JSXElementConstructor<any>>> | undefined' is not assignable to type 'LegacyRef<Legend> | undefined'.
          Type '(instance: ReactElement<any, string | JSXElementConstructor<any>> | null) => void' is not assignable to type 'LegacyRef<Legend> | undefined'.
            Type '(instance: ReactElement<any, string | JSXElementConstructor<any>> | null) => void' is not assignable to type '(instance: Legend | null) => void'.
              Types of parameters 'instance' and 'instance' are incompatible.
                Type 'Legend | null' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | null'.
                  Type 'Legend' is missing the following properties from type 'ReactElement<any, string | JSXElementConstructor<any>>': type, key
  Overload 2 of 2, '(props: Props, context: any): Legend', gave the following error.
    Type '{ content?: ContentType | undefined; iconSize?: number | undefined; iconType?: IconType | undefined; layout?: LayoutType | undefined; align?: HorizontalAlignmentType | undefined; ... 480 more ...; onBBoxUpdate?: ((box: DOMRect | null) => void) | undefined; }' is not assignable to type 'IntrinsicClassAttributes<Legend>'.
      Types of property 'ref' are incompatible.
        Type 'LegacyRef<ReactElement<any, string | JSXElementConstructor<any>>> | undefined' is not assignable to type 'LegacyRef<Legend> | undefined'.ts(2769)
No quick fixes avail

Also, I see that the same issue was fixed for Area. Hoping to get it fixed for Legend and Line.
Here is the link of that fixe issue 2156

[saghan]

https://github.com/recharts/recharts/blob/master/src/component/Legend.tsx line 41 exports Legend props.
https://github.com/recharts/recharts/blob/master/src/cartesian/Line.tsx line 78 exports Line props.
Was this what you are looking for?

[standbyoneself]

https://github.com/recharts/recharts/blob/master/src/component/Legend.tsx line 41 exports Legend props. https://github.com/recharts/recharts/blob/master/src/cartesian/Line.tsx line 78 exports Line props. Was this what you are looking for?

When using the code from the example, there is an error here:

const renderLegend = (props: LegendProps) => {
    const { payload } = props;

    return payload ? (
        <ul>
            {payload.map((entry, index) => (
                <li key={`item-${index}`}>{entry.value}</li>
            ))}
        </ul>
    ) : null;
};

<Legend content={renderLegend} />

TS2769: No overload matches this call.
  Overload 1 of 2, '(props: Props | Readonly<Props>): Legend', gave the following error.
    Type '(props: LegendProps) => JSX.Element | null' is not assignable to type 'ContentType'.
      Type '(props: LegendProps) => JSX.Element | null' is not assignable to type '(props: Props) => ReactNode'.
        Types of parameters 'props' and 'props' are incompatible.
          Type 'import("/Users/19484527/Desktop/front-rmc-lenta/node_modules/recharts/types/component/DefaultLegendContent").Props' is not assignable to type 'import("/Users/19484527/Desktop/front-rmc-lenta/node_modules/recharts/types/component/Legend").Props' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
            Type 'Props' is not assignable to type '{ wrapperStyle?: CSSProperties; chartWidth?: number; chartHeight?: number; width?: number; height?: number; margin?: { top?: number; left?: number; bottom?: number; right?: number; }; payloadUniqBy?: UniqueOption; onBBoxUpdate?: (box: DOMRect | null) => void; }' with 'exactOptionalPropertyTypes: true'. Consider adding 'undefined' to the types of the target's properties.
              Types of property 'width' are incompatible.
                Type 'string | number | undefined' is not assignable to type 'number'.
                  Type 'undefined' is not assignable to type 'number'.
  Overload 2 of 2, '(props: Props, context: any): Legend', gave the following error.
    Type '(props: LegendProps) => JSX.Element | null' is not assignable to type 'ContentType'.

[Krishrawat]

I am also facing this issue for LineProps, are we going to fix this anytime soon?

[b-hexsoul]

Any resolution on this?

[ckifer]

@b-hexsoul

https://codesandbox.io/s/simple-line-chart-forked-gdvzcn?file=/src/App.tsx

So in the latest alpha (2.7.0-alpha.0) DefaultLegendContentProps is now exported which solves the issue with LegendProps.

Is there still an issue with Line?

[ckifer]

Still an issue with Line confirmed https://github.com/recharts/recharts/blob/master/src/cartesian/Line.tsx#L71
that needs to be export type Props = Omit<CurveProps, 'points' | 'pathRef' | 'ref'> & LineProps;

Temporary workaround is const lineProps: Omit<LineProps, 'ref'> = {};

Feel free to make a PR