Skip to content

sanathko/react-rain-effect

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Displaying rain effect with in an HTML page using React

This project was bootstrapped with Create React App. Inspired by - https://freebiesbug.com/code-stuff/rain-drops-effect-with-webgl/ Code is extended from https://github.com/codrops/RainEffect

Install

Run the following command: npm install react-rain-effect OR yarn add react-rain-effect

Usage

import { Weather } from 'react-rain-effect

How to use the component

<Weather type="rain"/> type properties allowed - rain, drizzle, sunny, storm, fallout

Other properties allowed

Name Description
temperature number (if provided , will show the temperature passed) otherwise hide it
textureOverrides optional object, if passed, will override the default textures for each type ()
rainFg,rainBg,stormLightningFg, stormLightningBg, falloutFg,falloutBg,sunFg,sunBg, drizzleFg, drizzleBg
showTime boolean (if provided, will show the time asa a day time string)

How to use textureOverrides (code example)

import TextureRainFg from './background/background01.jpg';

const textureOverrides = {'falloutFg': TextureRainFg, 'falloutBg': TextureRainBg}