React-rainfall NPM

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

   import Rain from 'react-rainfall'
  // IMPORTANT - Parent element must have position relative or else rain will be positioned based on viewport 
   <div style={{
      position: 'relative',
      height: '600px',
      width: '1000px'
    }}> 
      <Rain />
   </div>

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.