react-circletree
A circle tree component for React applications
Get the component
npm install react-circletree --save
Use the component
If you're using an ES6-capable build system, simply use react-circletree:
var CircleTree = require('react-circletree');
Or if you're using an ES5 build system:
var CircleTree = require('react-circletree/es5');
An example app
See the exampleapp for an example
API
<CircleTree
radius={number: width of each segment, defaults to 80}
spacing={number: spacing between segments, defaults to 3}
leafRadius={number: width of each leaf segment, defaults to 7},
leafSpacing={numbe: spacing between leaves in a leaf stack, defaults to 2}
data={object: nested, keyed data. Leaf stacks encoded as arrays}
onToggle={function: see note below, no default}
/>
For an example of data, see this object.
passing a onToggle() handler
As segments in the circle tree can be clicked, you might want to do something based on that interaction.
As such, passing a onToggle function as a property to the <CircleTree> component will give you a way to know what the user clicked:
...
onToggle(labels) {
// labels is an array of all the applicable labels in the chain
// from the tree's root to the segment that was clicked by the
// user. As such, labels[0] is always the root label, and
// labels.slice(-1)[0] is always the segment the user clicked.
},
...
render() {
return <CircleTree onToggle={this.onToggle}/>
},
...