react-nodesy
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