Current default multi select mode is perfect. But sometimes need single select mode.
Thanks.

Problem:

• Font-awesome is too big (~800kb) for a react component package

Solution?:

...

For better manageability move onto React Class Component and typescript for type-checking.

const myThemes: ThemeSettings = {
    "custom": {
        text: {
            fontSize: 'std',
            fontFamily: `-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
    Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;`,
            color: '#000',
            selectedColor: '#fff',
            hoverColor: '#fff'
        },
        nodes: {
            height: '2.5rem',
            folder: {
                bgColor: 'transparent',
                selectedBgColor: '#006eff',
                hoverBgColor: '#006eff'
            },
            leaf: {
                bgColor: 'transparent',
                selectedBgColor: '#006eff',
                hoverBgColor: '#006eff'
            },
            separator: {
                border: '1px solid',
                borderColor: 'transparent'
            },
            icons: {
                size: '1rem',
                folderColor: '#64abd4',
                leafColor: '#64abd4'
            }
        }
    }
};

 <ReactTree nodes={itemList} onToggleSelectedNodes={handleSelect} themes={myThemes} theme="custom" />

When mouse hover or select item, the item's color is still "#000".
btw. How to disable hover action?

react-tree version: 3.0.1

Thanks for creating the awesome project!

Currently IconRenderer is passed with a string parameter node/leaf, but no node name. My use case is to render a file tree, which I hope to render different type of node with different icon, e.g. .txt file with text icon, .mp4 file with media player icon, etc.

I would expect IconRenderer to pass {label:"node", name: "file.txt"} or something similar.

Hello,

I'm having issues with the latest release (v3.0.1). It was working fine with the older v2.0, but now I get 2 warnings in the console:

1. Warning: Invalid DOM property Icon. Did you mean icon?
2. Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>

Also, got an import error with v3.0.1, so I had to do the following (despite what documentation is saying):
import { ReactTree } from "@naisutech/react-tree";`

I would appreciate any help in resolving these issues, or if this needs to be addressed with a new PR

I want to use this in my class component, which is a side bar, but whenever I add it to the render function, it causes an "Invalid hook call" error further up in my class. I'm not that experienced with React, but it's as if it thinks my entire class is a functional component when I add your Tree component.

It works as expected when I remove <Tree nodes={this.state.root} size="narrow" /> from the render function.

My sidebar class:

import React, { Component } from 'react';
import FileModel from '../FileModel';
import Tree from '@naisutech/react-tree'

export class Sidebar extends Component {
  constructor (props) {
    super(props);
    this.state = {
      root: {}
    }
  }

  componentDidMount() {
    this.getFolders();
  }

  async getFolders() {
    let resp = await fetch('/api/Folder');
    let data = await resp.json();
    let root = new FileModel(data);
    this.setState({ root: root }); //Error here
  }

  render() {
    return (
      <div className="sidebar">
        <Tree nodes={this.state.root} size="narrow" />
      </div>
    );
  }
}

We need to remove flow and rewrite the lib to use typescript

Fresh create-react-app sourced application, whenever I include the component, I get the following warning in console:

styled-components.esm.js:1 It looks like there are several instances of 'styled-components' initialized in
this application. This may cause dynamic styles to not render properly, errors during the rehydration
process, a missing theme prop, and  makes your application bigger without good reason.

See https://s-c.sh/2BAXzed for more info.

same thing happened with styled components v5.3.3 and v5.3.5

Hello,

it seems like controlled mode is not working.

Even if openNodes and selectedNodes are set without defaultOpenNodes and defaultSelectedNodes the tree still collapses and selects nodes on click.

<ReactTree openNodes={[]} selectedNodes={[]} nodes={nodes} />;

Demo:
https://codesandbox.io/s/infallible-moser-8uly0o?file=/src/App.js

Can you provide an example for controlled mode?

Thanks a lot :)

Loading message doesn't changed but with no data message prop works fine

I am new to react. I tried your tree component. I could get the sample to appear, I could get the themes to work. But I could not get the onSelect to work. I tried onSelect={this.onclickTree} for a method in my react class. I tried creating a function outside my class and using that onSelect={onMySelect} and onSelect={onMySelect()} . I tried onSelect={function noRefCheck(props){console.log(props);}} (I just copied that from the example.)

I tried another tree react component and used some of these 'function references', with that one they worked out ok. So I think some of these combinations are valid Java Script; others might not be; I understand.

Did the property name change from the examples?

function onSelect (props) {
console.log(props);
}

class Page2 extends Component { // etc....

// code to create the nodes like in the example and treeData2 for the other tree component.....
return(

Thanks for any comments.

IconRenderer function receive node/leaf and data parameters, but we don't know current state of the node inside this function. I want to render different icons for open and closed nodes. Maybe add third parameter isOpen to IconRenderer function or inside data parameter?

Hello. Firstly, thanks for this very good component. Very practical and customizable.
I have a doubt, that I can not find how to do if it is posible:
I would like to have one leaf node opened and only one. So when I click on one leaf node, I would like to have all of opened nodes to be closed.
How can I get this behavior?
Thanks in advance.

The Tree component does not re render when the state of the parent component changes

Customizing leaf node with given attribute might be a good option.

Hello Is there a Node(folder) rename and Delete option in the current tree?
If we can do that please let me know
I appreciate your help thanks!

I've added mine here : https://maifeeulasad.github.io/react-tree/

If you create a gh-pages branch, I can open a pull request.

What I mean by windowing is the use of virtual lists via react-virtualized in order to improve performance for large datasets, by only rendering items that would be visible.

As for the lazily loaded data, it would go as follows: when a node is expanded, if it's children aren't in a cache, then a callback would be invoked, which receives the ID of the expanded node. This callback would need to return a list of nodes (the children of the expanded node).

The lazily loading is a nice-to-have, but the windowing would be a great performance addition for large datasets. It would be overkill for small datasets, which is why it would need to be optional/togglable.

Hi There,
Recently i used your project and I love it very much. Would you please help me how can add or change SVG icons you used? i like to customize it to be like the attached image.

import "./styles.css";
import React, { useEffect, useState } from "react";
import { ReactTree } from "@naisutech/react-tree";

export default function App() {
  const [openNodes, setOpenNodes] = useState([]);
  const [nodeList, setNodesList] = useState([]);

  const nodes2 = [
    {
      id: "*",
      parentId: null,
      label: "Root 1"
    },
    {
      id: "223d7ae2-ddee-4136-a922-b6b26da4b992",
      parentId: "*",
      label: "Child 1",
      items: [
        {
          id: "465",
          parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
          label: "File 1"
        },
        {
          id: "435",
          parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
          label: "File 2"
        },
        {
          id: "778",
          parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
          label: "File 3"
        }
      ]
    },
    {
      id: "228",
      parentId: "325",
      label: "Child 2"
    },
    {
      id: "430",
      parentId: "325",
      label: "Child 3"
    },
    {
      id: "920",
      parentId: "438",
      label: "Child 4"
    },
    {
      id: "337",
      parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
      label: "Child 1 Child 1"
    },
    {
      id: "360",
      parentId: "228",
      label: "Child 2 Child 1",
      items: [
        {
          id: "776",
          parentId: "360",
          label: "File 3"
        },
        {
          id: "686",
          parentId: "360",
          label: "File 4"
        },
        {
          id: "579",
          parentId: "360",
          label: "File 5"
        }
      ]
    },
    {
      id: "353",
      parentId: "430",
      label: "Child 3 Child 1"
    },
    {
      id: "554",
      parentId: "430",
      label: "Child 3 Child 2"
    }
  ];

  useEffect(() => {
    const nodes = [
      {
        id: "*",
        parentId: null,
        label: "Root 1"
      },
      {
        id: "223d7ae2-ddee-4136-a922-b6b26da4b992",
        parentId: "*",
        label: "Child 1",
        items: [
          {
            id: "465",
            parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
            label: "File 1"
          },
          {
            id: "435",
            parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
            label: "File 2"
          },
          {
            id: "778",
            parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
            label: "File 3"
          }
        ]
      },
      {
        id: "228",
        parentId: "325",
        label: "Child 2"
      },
      {
        id: "430",
        parentId: "325",
        label: "Child 3"
      },
      {
        id: "920",
        parentId: "438",
        label: "Child 4"
      },
      {
        id: "337",
        parentId: "223d7ae2-ddee-4136-a922-b6b26da4b992",
        label: "Child 1 Child 1"
      },
      {
        id: "360",
        parentId: "228",
        label: "Child 2 Child 1",
        items: [
          {
            id: "776",
            parentId: "360",
            label: "File 3"
          },
          {
            id: "686",
            parentId: "360",
            label: "File 4"
          },
          {
            id: "579",
            parentId: "360",
            label: "File 5"
          }
        ]
      },
      {
        id: "353",
        parentId: "430",
        label: "Child 3 Child 1"
      },
      {
        id: "554",
        parentId: "430",
        label: "Child 3 Child 2"
      }
    ];

    setNodesList(nodes);
    setOpenNodes(["*"]);
  }, []);

  return (
    <div>
      <ReactTree defaultOpenNodes={openNodes} nodes={nodeList} />
      <ReactTree defaultOpenNodes={["*"]} nodes={nodes2} />
    </div>
  );
}

"Root 1" node of the first ReactTree is not default opened.
"Root 1" node of the second ReactTree is default opened.

There is a leaf shown at each level showing [empty]
it should be removed

I'm new to react. I want to use this for my campus project. But in requirement it says arrow should be in right hand side. How can I move Arrow icon to right hand side? And also I need to disable arrow icon in last children node. Thank you!
@ortonomy

Using the latest build (v3.1.0 which I was eager to install because it would fix some major issues for me). So, that version now introduces a singleSlect node option by default. Using the multiSelect={true} flag does not work in controlled state for me.

The callback onToggleOpenNodes always returns an array of 1 item that was lastly selected. Let me know if I am doing something wrong or please fix this.

Hi,

This looks great

Can we add support for react 18 please?

Hi there! I couldn't find any request for this so I'll explain what I would like to see in this awesome repo 😊

<Tree
  nodes={treeData}
  selected={treeData[0].id} // I'm forcing the tree to select the first node
/>

Basically, introduce a prop to allow the selection of elements without interacting with the Tree UI.

Example use-case

Let's say I'm using <Tree /> on the left of the screen to render a list of HTML tags that I'm actually rendering to the DOM on the right of the screen. When I click on an HTML element (on the right) I want the tree to show that tag as selected.

Seeing how the selected prop is being passed down internally, maybe it's easier to pass the actual node instead of the id:

<Tree selected={treeData[0]} />

Currently, there is no way to modify or turn off the tooltip text for child elements (if we need a custom text on hover or no help at all). Please advise if this option already exists (didn't find anything for this in the documentation), or if it needs to be added as a new feature.

Just keeping track of work.

I'm starting the fix.

Error list :

Cannot read property 'length' of null

Add a drag and drop event emitting API.

Suggest react-dnd lib

• [ ] enable nodes and folders to be draggable
• [ ] create drop targets on folder (including parent)
• [ ] create data API for emitting drag and drop events onDrag
• [ ] add loading overlay to indicate processing of data with isLoading prop

When the text is too long the text is truncated and you display an ellipsis.
That's perfect however, it would be great to have the possibility to see all the text when moving the mouse over it.
The NodeText is a span, addind a title with the text would solve the problem.

Hi,

Is it currently possible to edit any data in the tree? If not, are you planning to implement the edit functionality? Thanks!

is there any possibility of including a search possibility?

I need to pass a string and it shows only parents and children that contain those characters, is it possible?

When a folder is collapsed, show "right arrow" icon. and when is expended, the icon should display "down arrow" like old version.
Thanks.

So basically I am trying to remove the transformed icon and add a new icon when the node is clicked

Instead of rotating the folder to 90 degree after clicking the node i want to replace it with open folder image. thank you for any suggestions

Hello
There are two issues related to using one Tree instance or multiple instances.
If we are using for example two Tree instances with onSelect for each one of them
Both are triggered on selecting any node in any one of both Trees and that is completely wrong and gets me invalid values.

Note: This error wasn't there before version 2.0.0 and i cannot downgrade because of not supporting typescript.

It would be nice if there is any way to hide the borders between the elements without creating a new theme :)

Hi, the library works as needed for me but there's an issue when multiple children with same parent gets created:

To reproduce, change parent id of last object with label 'Node' to 1234 (The root parent id)
https://codesandbox.io/s/naisu-techreact-tree-demo-p42lv

Thanks for this extension!

I'd like to implement a right-click behavior on my tree. It would be useful to have some kind of onClick property which would accept a callback like (e: MouseEvent, id: TreeNodeId) => void.

Is this possible already?

I'm trying to write something that expands out a nested node given an id. I've been trying to make some of the examples work, but drawing a blank on any except onSelect.

I'm new enough to React that the example

        {(controls) => {
            return <button onClick={() => controls.toggleOpenCloseAllNodes()}>Open/close all nodes</button>
        }}

Didn't make sense or at least seem to do anything when I pasted it in.

I saw this:

https://naisutech.github.io/react-tree/?path=/docs/react-tree--with-controls

But the code it showed

onOpenClose={function noRefCheck(){}}

Doesn't seem to do anything when I copied it.

Here's a sandbox of my attempt at following the example:

https://codesandbox.io/s/naisu-techreact-tree-demo-forked-5d5sc?file=/src/index.js

Can someone point me in the right direction? Thanks.

I would have found it helpful to have a second text color option for on-hover / select state. If I have a highlight color added, I would like to have the text color change, wherever this highlight color appears. Thanks

Is it somehow possible to disable ellipsis text for the child items and let the whole container overflow-x scroll?

Looking for a way to specify no svg file icon or ability to change it. I don't see currently an easy way to hide it.

Hi,

The onSelect and onOpenClose callbacks are currently called from within a setState() hook.
If I have some code in my callback function to modify my app state (which, in turn, will cause another component to re-render), I get the dreaded "cannot update a component while rendering a different component" error in the console.
I've fixed it for now by removing the callbacks, and instead, just having this in the main component body, but there may be a better solution:

run npm install ...

import Tree from '@naisutech/react-tree'

then error :

Could not find a declaration file for module '@naisutech/react-tree'. 'd:/myWork/my_tcb_client/TCBWebClient/node_modules/@naisutech/react-tree/build/Tree.js' implicitly has an 'any' type.
Try npm install @types/naisutech__react-tree if it exists or add a new declaration (.d.ts) file containing declare module '@naisutech/react-tree';ts(7016)

Hello, and thanks for the awesome component!

Is it possible to open a specific node on initialization? This would be particularly helpful for direct linking to folder states. Thanks!

I looked for this into documentation section, couldn't find any. Maybe this will be a really cool feature/enhancement.

What is the best way to render all nodes in open state by default?

I was able to get the following working in Typescript, but seemingly not the best approach... Is the following the intended way?

            <Tree nodes={nodes} theme="light">
                {(controls) => {
                    if (controls.toggleOpenCloseAllNodes && controls.openNodeIds?.length == 0) {
                        controls.toggleOpenCloseAllNodes();
                    }
                    return <></>
                }}
            </Tree>

Ideally, there would be some Tree prop that we can easily pass in the openNodeIds state.., or perhaps a openAllNodes={boolean} prop?

            <Tree nodes={nodes} theme="light" openNodeIds={[1, 2]}>
            </Tree>
            
            <Tree nodes={nodes} theme="light" openAllNodes>
            </Tree>

Thoughts?

How to restrict expand or select for particular element?

Thanks