How to declare a React component extending package component in Typescript?

Question

I'm looking for a way to declare a React component extending existing component with my own props in Typescript. The source component is ReactD3Tree from react-d3-tree npm package v2.0.0. So I have:

import ReactD3Tree from "react-d3-tree";
import { TreeProps } from "react-d3-tree/lib/Tree/types";
import { RawNodeDatum } from "react-d3-tree/lib/types/common";

interface MyNode extends RawNodeDatum {
   // some properties
}

interface MyProps extends TreeProps {
   onNodeClick: (targetNode: MyNode, event: Event) => any;
}

let MyTree: React.ComponentClass<MyProps>;


const MyComponentWithOtherOperations = () => {
    ...some more code here enter code here

    return <MyTree data={data} onNodeClick={handleNodeClick} />
}

My question is how do I properly override onNodeClick prop of ReactD3Tree that accepts targetNode: RawNodeDatum as a parameter? I want to have targetNode: MyNode as a parameter where MyNode extends RaNodeDatum Thanks in advance

@RameshReddy I want to override onNodeClick method which accepts a node as a parameter. I want to have my custom node there. — Akhmediyar Sailaubekov
– Akhmediyar Sailaubekov, Commented Jan 2, 2021 at 12:55
TypeScript supports multiple level inheritance. You can extend ReactD3Tree which extends React.Component. Is there a problem with this approach ? stackoverflow.com/questions/16839146/… — Anand Raj
– Anand Raj, Commented Jan 2, 2021 at 14:47
@AkhmediyarSailaubekov I got what you're trying to do. See - codesandbox, prop for custom nodes. — Ramesh Reddy
– Ramesh Reddy, Commented Jan 2, 2021 at 18:56

Sam · Accepted Answer · 2021-01-02 14:34:41Z

0

If I understood correctly, you want to pass an extra parameter to your NodeClick event handler. What you are looking for is a curried function.

const nodeClickHandler = customprop => nodeValue => {
     console.log(customprop, nodeValue); 
};

const MyComponentWithOtherOperations = () => {
    ...some more code here enter code here

    return <MyTree data={data} onNodeClick={nodeClickHandler("your custom data")} /> }

answered Jan 2, 2021 at 14:34

Sam

1,2591 gold badge8 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to declare a React component extending package component in Typescript?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related