Package Exports

react-animated-squares
react-animated-squares/src/SquaresBG.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-animated-squares) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-animated-squares

A customizable, animated background featuring floating squares

Adapted from design by Mohammad Abdul Mohaiman at https://codepen.io/mohaiman/pen/MQqMyo

Usage Example

import SquaresBG from "react-animated-squares";

<div id="container">
  <SquaresBG count={20} speed={0.7} />
</div>

Instructions

To install: npm i react-animated-squares

Place <SquaresBG /> as first child in parent element, and place contents as subsequent elements. BG will fill any parent with a defined width and height. Parent should have CSS rule overflow: hidden

Props

All props are optional and can be undefined.

count : number

Default value: `10`

Number of animated squares to render

speed : number

Default value: `0.5`

Speed at which squares rise. A number between 0 and 1, inclusive. Higher is faster

minSize : number

Default value: `100`

Minimum size of squares, in pixels

maxSize : number

Default value: `200`

Maximum size of squares, in pixels

backgroundColor : string

Default value: `"#4E54C8"`

Color of background

squareColor : string

Default value: `"#FFFFFF"`

Color of squares, with 0.2 alpha value by default. Must be 6 character hex, rgb, or rgba

randomBGColor : boolean

Default value: `false`

Renders a random background color, overrides backgroundColor

randomSquareColor : boolean

Default value: `false`

Renders a random square color for each square, overrides squareColor