Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

react-nodesy

1.0.3 • Public • Published

react-nodesy

Greenkeeper badge

Build Status Coverage Status Dependency Status devDependency Status

npm install react-nodesy

Render a hierarchy of nodes

Look at demo here: Codesandbox

import React from 'react'
import Nodesy from 'react-nodesy'
 
const Folder = ({ data, state, setNodeState, children }) => {
  return (
    <div className="folder">
      <div className="name">{data.name}</div>
      <div
        className="folder-files"
        onClick={() => setNodeState({ isExpanded: !state.isExpanded })}
      >
        {state.isExpanded ? children : null}
      </div>
    </div>
  )
}
 
const File = ({ data }) => {
  return (
    <div className="file">
      {data.name}
    </div>
  )
}
 
class Hierarchy extends React.Component {
  state = {
    nodes: [{
      type: 'folder',
      data: { id: '123', name: 'whatup' },
      state: {
        isExpanded: false
      },
      children: [{
        type: 'file',
        data: { id: '456', name: 'someName' }
      }]
    }]
  }
  render () {
    return (
      <Nodesy
        data={this.state.nodes}
        types={{
          folder: Folder,
          file: File
        }}
        onChange={(nodes) => this.setState({
          nodes
        })}
      />
    )
  }
}
 
export default Hierarchy

Note! Each node requires data with an "id" property related to them!

The following properties are passed to each node:

  • data: The data related to the node
  • state: The state related to the node
  • setNodeState: Callback to change the state of the node
  • children: The child nodes of the node, think of it as component props
  • parent: The parent node,
  • depth: The depth of the node (0, 1, 2 etc.). Typically used for indenting

Typescript

import React from 'react'
import { factory, NodeProps, HierarchyData } from 'react-nodesy'
 
type NodeData = {
  name: string
}
 
type NodeState = {
  isExpanded: boolean
}
 
type TreeNodeProps = NodeProps<NodeData, NodeState>
 
type TreeHierarchy = HierarchyData<NodeData, NodeState>
 
const Nodesy = factory<NodeData, NodeState>()
 
const Folder: React.SFC<TreeNodeProps> = ({ data, state, setNodeState, children }) => {
  return (
    <div className="folder">
      <div className="name">{data.name}</div>
      <div
        className="folder-files"
        onClick={() => setNodeState({ isExpanded: !state.isExpanded })}
      >
        {state.isExpanded ? children : null}
      </div>
    </div>
  )
}
 
const File: React.SFC<TreeNodeProps> = ({ data }) => {
  return (
    <div className="file">
      {data.name}
    </div>
  )
}
 
type Props = {}
 
type State = {
  nodes: TreeHierarchy
}
 
class Hierarchy extends React.Component<Props, State> {
  state = {
    nodes: [{
      type: 'folder',
      data: { id: '123', name: 'whatup' },
      state: {
        isExpanded: false
      },
      children: [{
        type: 'file',
        data: { id: '456', name: 'someName' }
      }]
    }]
  }
  render () {
    return (
      <Nodesy
        data={this.state.nodes}
        types={{
          folder: Folder,
          file: File
        }}
        onChange={(nodes) => this.setState({
          nodes
        })}
      />
    )
  }
}
 
export default Hierarchy

install

npm i react-nodesy

Downloadsweekly downloads

1

version

1.0.3

license

MIT

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability