react-blobber
Create orthogonal blobs from grouped arrays of rectangles
Example of convex-hull algorithm:
Examples of polygon-union algorithm:
Usage
npm install react-blobber --save
;; const groupLabels = 'Mercury' 'Venus' 'Mars' 'quarks' 'leptons' 'bosons' 'heart' 'lungs' 'brain'; const groupColors = '#D24D57' '#F5D76E' '#19B5FE'; const groupRectangles = x: 142 y: 154 width: 150 height: 24 x: 254 y: 102 width: 150 height: 24 x: 306 y: 294 width: 150 height: 24 x: 219 y: 245 width: 150 height: 24 x: 102 y: 289 width: 150 height: 24 x: 102 y: 209 width: 150 height: 24 x: 310 y: 190 width: 150 height: 24 x: 393 y: 246 width: 150 height: 24 x: 392 y: 130 width: 150 height: 24 ; Component { const exampleBlobs = groupRectangles; return <div> exampleBlobs </div> ; }
Props
-
rects
: an array of rectangles for one blob group (example: elements ofgroupRectangles
above). A rectangle object consists ofx
andy
top-left coordinates as well aswidth
andheight
. -
pathOffset
: blob padding, in pixels -
cornerRadius
: blob corner radius, in pixels -
containerStyle
: style object for container div -
svgStyle
: style object for svg paths -
algorithm
: options areconvex-hull
orpolygon-union
. There are minor differences in appearance between the two algorithms.convex-hull
may not produce optimal results for very complex layouts or groupings, due to convexity requirements. The waypolygon-union
creates extensions between elements may make it more amenable to complex groupings.
Development
npm run dev
to start the webpack dev server with hot reloading, then go to http://localhost:3000.
Build
npm run build
Outputs to dist/
.
Test
npm test