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.

Planned updates

• Add more rain effect preset options
• Add direction change options
• Add in and out fading for droplets options.