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](https://npmjs.com) or [yarn](https://yarnpkg.com/) to install React-Flowfield.
To install with npm:
```bash
npm install react-flowfield
```
To install with yarn:
```bash
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.
```tsx
import react from 'react';
const Component = () => {
return (
);
};
```
The example above will create this effect:
### Props
```tsx
//Length of animation, takes Number. The longer it last, the more the screen will be coverd.
//The default is 4000.
//Number of particals, the more particals, the faster the screen gets coverd.
//The default is 2000.
//backgroundColor, takes and object. The default background color of the canvas.
//Each take a number between 0-255.
//The color of the particals, will change the color of the pattern.
//Each take a number between 0-255
//Also takes style, class and id.
```
## Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
## License
[MIT](https://choosealicense.com/licenses/mit/)