React-sortable-tree: How to used nodeContentRenderer

[mohannadsalem]

Hello ,
i have difficulty using nodeContentRenderer or even understanding it so if it would be better to provide an example on how to use to customize my own Node. I have to Node one of type A and another of type B those who are of Type A those of the same type canot be children to each other. so if there is another way to do so plz state it .

[rheinheimer]

I'm also having a hard time using nodeContentRenderer, though my needs are different. I'm simply trying to override the built-in node style. My .scss is loaded properly, but is overridden by the default node-renderer.scss, so mine is ineffectual.

@mohannadsalem: It seems nodeContentRenderer is for customizing the look/contents of the node, and not for restricting/specifying parent-child relationships. I haven't used it yet, but I assume onMoveNode would be the place for that (i.e., check if the parent can hold the child, and if not, return to original position with some user feedback?)

[fritz-c]

@rheinheimer is correct about nodeContentRenderer being for customizing the appearance of the node.

In order to prevent nodes from dropping in certain areas, you would use a callback in the canDrop prop that looks something like:

const canDrop = ({ node, nextParent }) => !nextParent || node.type !== nextParent.type

Assuming you have your A type or B type stored in the type property.

[mohannadsalem]

@fritz-c : I have been trying to use canDrop Api in the generateNodeProps Api inorder To specify for each node it's type, or should it be declared in the component tag it self as a property and it would be able to differentiate between different node and nextParent on itself ? after giving it this line
const canDrop = ({ node, nextParent }) => !nextParent || node.type !== nextParent.type
and thanks alot for your effort it is really a helpful component that i am willing to depend on in future projects and thanks @rheinheimer for the observation, Missed this point

[fritz-c]

The node passed into the canDrop API comes straight from the nodes in your treeData. You can either set type when you initially generate your tree data, or you can calculate it inside of canDrop.
If that didn't make sense, I could probably give you some more concrete advice if I could see the relevant parts of your code.

By the way, I added an example this morning of how to use the canDrop prop in a few different ways. It's called "Prevent drop":
https://fritz-c.github.io/react-sortable-tree/storybook/?selectedKind=Basics&selectedStory=Prevent%20drop&full=0&down=1&left=1&panelRight=0&downPanel=storybook%2Fnotes%2Fpanel

[dharanidhanapalan]

Hi, Can someone tell me how to use the nodeContentRenderer property. Did I need to copy the node-renderer-default.js file in my folder and pass that name to nodeContentRenderer property or is there some other way to use node-renderer-default.js it?

Thanks in advance.

[justduy]

@dharanidhanapalan did you figure it out ?