miscellaneous

WebCola for React

Dec 11, 2019
WebCola for React

react-cola

WebCola for React.

react-cola

???? Getting Started

Using npm:

npm install --save react-cola

Using yarn:

yarn add react-cola

✍️ Example

Below is a basic example of how to define a simple renderLayout prop, which will be called whenever the layout has been updated by WebCola.

import React from 'react'; import WebCola from 'react-cola'; import { Line } from 'react-lineto'; export default () => ( <WebCola renderLayout={layout => ( <> {layout.groups().map( ({ bounds: { x, X, y, Y } }, i) => { const width = X - x; const height = Y - y; return ( <div key={i} style={{ position: 'absolute', left: x, top: y, width, height, backgroundColor: 'orange', borderRadius: 5, zIndex: -2, }} /> ); }, )} {layout.links().map( ({ source, target }, i) => { const { x, y } = source; const { x: x2, y: y2 } = target; return ( <Line key={i} x0={x} y0={y} x1={x2} y1={y2} borderColor="blue" zIndex={-1} /> ); }, )} {layout.nodes().map( ({x, y, width, height, name }, i) => ( <div key={i} style={{ position: 'absolute', left: x - width * 0.5, top: y - height * 0.5, width, height, backgroundColor: 'red', borderRadius: 5, }} > {name} </div> ), )} </> )} nodes={[ { width: 60, height: 40, name: 'a', }, { width: 60, height: 40, name: 'b', }, { width: 60, height: 40, name: 'c', }, { width: 60, height: 40, name: 'd', }, { width: 60, height: 40, name: 'e', }, { width: 60, height: 40, name: 'f', }, { width: 60, height: 40, name: 'g', }, ]} links={[ { source: 1, target: 2 }, { source: 2, target: 3 }, { source: 3, target: 4 }, { source: 0, target: 1 }, { source: 2, target: 0 }, { source: 3, target: 5 }, { source: 0, target: 5 }, ]} groups={[ { leaves: [0], groups: [1] }, { leaves: [1, 2] }, { leaves: [3, 4] }, ]} width={540} height={760} /> );

GitHub

Recommended