Breaking News: Grepper is joining You.com. Read the official announcement!

react-hyper-tree example

Muneeba Dilawaze answered on February 1, 2023 Popularity 3/10 Helpfulness 8/10

answer react-hyper-tree example

react-hyper-tree example

Comment

import React from 'react'
  import Tree, { useTreeState } from 'react-hyper-tree'
  
  const data =  [
  {
    id: 1,
    name: "Parent 1",
    children: [
      {
        id: 2,
        name: "Child 1",
        children: [
          {
            id: 5,
            name: "Child 1__1"
          },
          {
            id: 6,
            name: "Child 1__2"
          },
          {
            id: 7,
            name: "Child 1__3"
          }
        ]
      }
    ]
  },
  {
    id: 1,
    name: "Parent 2",
    children: [
      {
        id: 2,
        name: "Child 1",
        children: [
          {
            id: 5,
            name: "Child 1__1",
            children: [
              {
                id: 6,
                name: "Child 1__2"
              }
            ]
          },
          {
            id: 6,
            name: "Child 1__2"
          },
          {
            id: 7,
            name: "Child 1__3"
          }
        ]
      }
    ]
  },
  {
    id: 1,
    name: "Parent 3",
    children: [
      {
        id: 2,
        name: "Child 1",
        children: [
          {
            id: 5,
            name: "Child 1__1"
          },
          {
            id: 6,
            name: "Child 1__2"
          },
          {
            id: 7,
            name: "Child 1__3"
          }
        ]
      }
    ]
  }
];

  const Component = () => {
    const { required, handlers } = useTreeState({
      id: 'tree',
      data: data,
      defaultOpened: true,
      multipleSelect: false,
    })
    
    return (
      <Tree
                  {...required}
                  {...handlers}
                  horizontalLineStyles={{
                        stroke: '#c4c4c4',
                        strokeWidth: 1,
                        strokeDasharray: '1 4',
                  }}
                  verticalLineStyles={{
                        stroke: '#c4c4c4',
                        strokeWidth: 1,
                        strokeDasharray: '1 4',
                  }}
                  draggable={false}
                  gapMode={padding}
                  depthGap={20}
                  disableLines={false}
                  disableHorizontalLines={false}
                  disableVerticalLines={false}
                  verticalLineTopOffset={0}
                  verticalLineOffset={5}
                  renderNode={null}
              />
    )
  }

  export default Component

Popularity 3/10 Helpfulness 8/10 Language javascript

Source: alekseymakhankov.github.io

Tags: javascript

Link to this answer
Share Copy Link

Contributed on Feb 01 2023

Muneeba Dilawaze

0 Answers Avg Quality 2/10

react-hyper-tree example

Contents

More Related Answers

react-hyper-tree example

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.