react-symmetrical-shapes-container

Create a symmetrical container for your components or images GIT

Installation

npm i react-symmetrical-shapes-container

Usage

import { ShapesContainer } from 'react-symmetrical-shapes-container'

const shapesArray = [{}, {}, {}]

const App = () => <ShapesContainer shapes={shapesArray} />

! Debug

Visualization: Will outline the grid cells (grey) and shapes (red)

Debug Messages: Comign Soon !

<ShapesContainer debug={true} />

! shapesArray examples

const shapesArray = [{}, {}, {}] // Will Create 3 squares

const shapesArray = [{}, { type: 'rectangle' }, {}] // the second shape will be a rectangle

const shapeArray = [{}, { size: { width: 2, height: 1 } }, {}] // same as above

Hierarchy preset > type > size

*Example: If you have both type and size the shape will be based on type

Props

ShapesContainer

Attribute	Type	Default	Description
shapes	array	null	Array of objects (shapes). *Allowed props below*
weight	number	4	(Optional) Columns Count
forceWeight	boolean	true	(Optional) Will resize shapes to fit weight (or, if false, thows error)
preset	number	null	(Optional) Allows the use of presets. *Available preset below*
className	string	null	(Optional) Sets the className attribute of the container
spacing	number	0	(Optional) Sets the margin style attribute of shapes
debug	boolean	false	(Optional) Debug Mode

Shape

Attribute	Type	Default	Description
type	string	null	(Optional) Shape of shape *Available shape types below*
size	object	{ width:1, height:1 }	(Optional) Custom shape size
spacing	number	*inherit	(Optional) Will overide spacing passed down by the ShapesContainer
classname	sting	null	(Optional) Component inside the shape.
component	Component	null	(Optional) Component inside the shape.
debug	boolean	inherit	(Optional) Will overide debug passed down by the ShapesContainer

**\*Shape Types**

/* Square */
"square": { width: 1, height: 1 },
"big-square": { width: 2, height: 2 },

/* Rectangle */
"rectangle": { width: 2, height: 1 },
"big-rectangle": { width: 3, height: 2 },

/* Rectangle Vertical */
"rectangle-ver": { width: 1, height: 2 },
"big-rectangle-ver": { width: 2, height: 3 }

Available Presets

*preset work better combined with weight

**Preset = 2**

<ShapesContainer weight={2} preset={2} />

**Preset = 3**

<ShapesContainer weight={3} preset={3} />

**Preset = 4**

<ShapesContainer weight={4} preset={4} />

**Preset = 'random'**

*Not implemented yet

<ShapesContainer preset={'random'} />

Every shape will get a random 'type' value.

*The examples presets above have Debug Mode Enabled for visualization.

TODO

• Add debug messages for Debug Mode

• Debug Mode Errors for props

• Add more presets

• *Add option for Flexible Shapes

• Better Preset example images

Contributing

Fill free to open an issue to discuss possible changes.

License

MIT