React-Flowfield

React-flowfield is a background component for react, it will give you a highly customizable component to make very creative backgrounds.

Installation

Use the package manager npm or yarn to install React-Flowfield.

To install with npm:

npm install react-flowfield

To install with yarn:

yarn add react-flowfield

Usage

It works straight out the box, and will give you a white background with black particals as default. You can change the color of the particals and the background with props.

The background component will fill the parent component, it uses a html canvas. To place elements ontop of the background, the elements needs to have Position set to absolute.

import react from 'react';

const Component = () => {
  return (
    <div
      style={{
        height: '100vh',
        width: '100vw',
        top: 0,
        left: 0,
      }}
    >
      <FlowField style={{ position: 'absolute' }} lengthOfAnimation={1000} />
      <div
        style={{
          height: 'auto',
          width: '300px',
          backgroundColor: 'gray',
          position: 'absolute',
          left: '50%',
          top: '50%',
          textAlign: 'center',
        }}
      >
        <h1>Hello world</h1>
      </div>
    </div>
  );
};

The example above will create this effect:

Props

//Length of animation, takes Number. The longer it last, the more the screen will be coverd.
//The default is 4000.
<FlowField lengthOfAnimation={number} />

//Number of particals, the more particals, the faster the screen gets coverd.
//The default is 2000.
<FlowField numberOfParticals={number} />

//backgroundColor, takes and object. The default background color of the canvas.
//Each take a number between 0-255.
<FlowField backgroundColor={R: number, G: number, B: number, A: number} />

//The color of the particals, will change the color of the pattern.
//Each take a number between 0-255
<FlowField particalColor={R: number, G: number, B: number, A: number} />

//Also takes style, class and id.
<FlowField style={{CSS}} className={"string"} id={"string"} />

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT