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 |

/* 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

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

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

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

*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