React-sortable-tree: How to use nodeContentRenderer correctly?

[dmitrii-esin]

Tell me, please, how to use nodeContentRenderer correctly.
I want to wrap the NodeRendererDefault in ContextMenuTrigger.

My example:

...
import SortableTree, { toggleExpandedForAll, addNodeUnderParent, getNodeAtPath } from 'react-sortable-tree';
import { ContextMenu, MenuItem, SubMenu, ContextMenuTrigger } from 'react-contextmenu';
import NodeRendererDefault from './NodeRendererDefault.jsx';

...

<SortableTree
    ...
    // "node" : I need rowInfo in the context menu items
    nodeContentRenderer={({ node }) => (
         <div>
              <ContextMenuTrigger id={MENU_TYPE} holdToDisplay={300} collect={() => node}>
                 { NodeRendererDefault }
              </ContextMenuTrigger>
          </div>
     )}
    ...
>

...

The result is nothing rendered =(

I have already read these threads, but I did not find the answer to my question there:
https://github.com/frontend-collective/react-sortable-tree/issues/4
https://github.com/frontend-collective/react-sortable-tree/issues/135

Thanks in advance.

[ytakayanagi]

I hope my answer will help anyone who is struggling with nodeContentRenderer.

1. Create a JavaScript file (ex. CustomNodeContentRenderer.js).
2. Copy the code from node-renderer-default.js and paste it to the file you just created.
3. Download react-sortable-tree from GitHub. I just downloaded it as ZIP file in my case.
4. Copy utils folder and node-renderer-default.css to the same directory where you created your Javascript file.
5. Import the file you created to your Tree component
   import CustomNodeContentRenderer from './CustomNodeContentRenderer';
6. Add props to your SortableTree.
   <SortableTree nodeContentRenderer={CustomNodeContentRenderer} /> }
7. Done!

To confirm if everything is working, just edit the JavaScript you created.

[lifejuggler]

would be nice if this is part of the tutorial series. I will copy your instructions to create such a doc. Thanks @ytakayanagi