Repository files navigation

An extremely lightweight React component to declaratively (and elegantly) plot shapes on an inline SVG

You can now use your own shape implementation by passing it as a plugin (seeplugin section below for more information).Below are a couple of plugins by@fuddl.

• text-marker (Demo)
• quadratic-bezier (Demo)

Responsive Illustrations	On-The-Fly Animations	Interactive Applications
demo	demo	demo
source code	source code	source code

npm install --save bare-minimum-2d

This isan example of what you can pass to aBareMinimum2d component.

You pass it like so:

importBareMinimum2dfrom'bare-minimum-2d'<divstyle={{width:'100%',height:'100vh'}}><BareMinimum2d{...{ data, container}}/></div>

The component takes the dimensions of its parent and is always centered

ABareMinimum2d component only has two props:container anddata.container is a small object with exactly four elements.data is an array containing objects.

Example:

importBareMinimum2dfrom'bare-minimum-2d'constcontainer={color:'#0000FF',opacity:0.2,xRange:300,yRange:500}constdata=[{x:[0],y:[0],color:"#FFFFFF",opacity:1.0,size:10,type:'points',id:'center'}]<divstyle={{width:"100%",height:"100vh"}}><BareMinimum2d{...{ data, container}}/></div>

container.color andcontainer.opacity specifies the canvas color ofBareMinimum2d.

The cartesian coordinate system ofBareMinimum will follow the diagram below givencontainer.xRange andcontainer.yRange. Position (0, 0) will always be at the center of the rendered component.

yRange/2||-xRange/2-------(0,0)---------xRange/2||-yRange/2

Please take a look at morecomplex example data prop to get the idea.each element of the arraydata should be a hash-like objectwith atype key which should have a value that is one ofthe following:

Elements of thedata array will be stacked based on the order they are declared.The first element will be at the most bottom layer while the last element of the array will be at the top.

All attributes are ALWAYS required, nothing is optional because there are no default values. Theid attribute must be unique for each element of thedata array.

You can add your own shapes as a plugin for example, here's an example plugin written by@fuddl

constTriangle=({ x, y, transforms, size, color, opacity, id, i})=>{constcx=transforms.tx(x)constcy=transforms.ty(y)constySize=size*0.8626return(<polygon{...{        opacity,id:`${id}-${i}`,fill:color}}points={[`${cx},${cy-ySize}`,`${cx+size},${cy+ySize}`,`${cx-size},${cy+ySize}`].join(' ')}/>)}consttrianglesPlugin={triangle:(element,transforms)=>{const{ size, color, opacity, id}=elementreturnelement.x.map((x,i)=>(<Triangle{...{          x,y:element.y[i],          size,          color,          opacity,          id,          i,          transforms}}key={`${id}-${i}`}/>))}}

And you can use it like so:

consttriangle={"x":[-163.72675374383329],"y":[-154.33259574213795],"opacity":1,"size":60,"color":"#2196F3","type":"triangles","id":"points0"}<divstyle={{width:"100%",height:"100vh"}}><BareMinimum2d{...{data:[triangle], container,plugins:[trianglesPlugin]}}/></div>

END

1. Clone this repository.
2. Add your changes
3. You can add a demo or update the demo based on your changes somewherehere
4. After making your change go run the following command to see if it works as you expect.

npm install && npm run build && rm -rf node_modules && cd example && npm install && npm run start

PRs welcome! Please read thecontributing guidelines and thecommit style guide!

MIT ©Mithi