Package Exports
- react-circletree
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-circletree) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-circletree
A circle tree component for React applications
Get the component
npm install react-circletree --saveUse 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}/>
},
...