Simple and customizable rainfall animation background for a parent element
npm install react-rainfall # React Rainfall
A simple to use React package that provides a rainfall animation effect to the background to a parent element.
npm - https://www.npmjs.com/package/react-rainfall
## Installation
``
npm i react-rainfall
## Usage
jsx
import Rain from 'react-rainfall'
// IMPORTANT - Parent element must have position relative or else rain will be positioned based on viewport
position: 'relative',
height: '600px',
width: '1000px'
}}>
## API
Name | Is Required? | type | Default | options | Description
--- | -- | --- | --- | --- | ----
numDrops | false | number | parentWidth / 25 | number | The number of rain drops that is animated
dropletColor | false | color in rbg() format | white | 'rgb(200, 200, 200) | Color of droplets, which will use a linear gradient effect. Must be in rgb format.
size | false | string | 'default' | 'short' (20px)
'default' (120px)
'long' (200px) | Change the length of the rain drops.
showImpact | false | boolean | true| boolean | Show the impact animation when the rain drop reachs the bottom.
rainEffect | false | string | undefined | 'rainbow'
More in development | Select a preset for different rainfall effects
dropletOpacity | false | number | .5 | 0 - 1 | Change the opacity of the droplet itself. Use a decimal number between 0 and 1.
