Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/burakcan/react-snowstorm
A Snow Effect component for React.
https://github.com/burakcan/react-snowstorm
Last synced: 13 days ago
JSON representation
A Snow Effect component for React.
- Host: GitHub
- URL: https://github.com/burakcan/react-snowstorm
- Owner: burakcan
- License: gpl-3.0
- Created: 2015-12-03T17:57:05.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2023-01-04T20:36:56.000Z (almost 2 years ago)
- Last Synced: 2024-10-02T07:09:48.800Z (about 1 month ago)
- Language: JavaScript
- Homepage: http://burakcan.github.io/react-snowstorm
- Size: 879 KB
- Stars: 224
- Watchers: 7
- Forks: 25
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- fucking-awesome-web-effect - snowstorm - A Snow Effect component for React. Uses Snowstorm under the hood. (🚀 A series of exquisite and compact web page cool effects / Rain & Snow)
- awesome-web-effect - snowstorm - A Snow Effect component for React. Uses Snowstorm under the hood. (🚀 A series of exquisite and compact web page cool effects / Rain & Snow)
README
# react-snowstorm
A Snow Effect component for React. Uses [Snowstorm](http://www.schillmania.com/projects/snowstorm/) under the hood.
**Live Demo :** [http://burakcan.github.io/react-snowstorm](http://burakcan.github.io/react-snowstorm)
## Getting Started
### Installation
```
$ npm install --save react-snowstorm
```
## Usage
```javascript
import React, { Component } from 'react';
import SnowStorm from 'react-snowstorm';
class MyComponent extends Component {
render(){
return (
)
}
}
```
###### Available Options (props)
* **animationInterval** = (default = 33)
Theoretical "milliseconds per frame" measurement. 20 = fast + smooth, but high CPU use. 50 = more conservative, but slower
* **excludeMobile** = (default = true) By default, mobile devices are excluded from the snow effect to be nice to their CPUs (and batteries.) If your local marketing department insists, "This must work on mobile!" despite being warned of the downsides, you can set this option to false to enable Snowstorm on devices like the iPhone, iPad and Android phones etc. The demo page has the effect enabled for mobile devices.
* **flakeBottom** = (default = null)
Limits the "floor" (pixels) of the snow. If unspecified, snow will "stick" to the bottom of the browser window and persists through browser resize/scrolling.
* **flakesMax** = (default = 128)
Sets the maximum number of snowflakes that can exist on the screen at any given time.
* **flakesMaxActive** = (default = 64)
Sets the limit of "falling" snowflakes (ie. moving on the screen, thus considered to be active.)
* **followMouse** = (default = true)
Allows snow to move dynamically with the "wind", relative to the mouse's X (left/right) coordinates.
* **freezeOnBlur** = (default = true)
Stops the snow effect when the browser window goes out of focus, eg., user is in another tab. Saves CPU, nicer to user.
* **snowColor** = (default = '#fff')
Don't eat (or use?) yellow snow.
* **snowCharacter** = (default = '•')
• (•) = bullet. · entity (·) is not used as it's square on some systems etc. Changing this may result in cropping of the character and may require flakeWidth/flakeHeight changes, so be careful.
* **snowStick** = (default = true)
Allows the snow to "stick" to the bottom of the window. When off, snow will never sit at the bottom.
* **targetElement** = (default = null)
An HTML element which snow will be appended to (default: document body.) Can be an element ID string eg. 'myDiv', or a DOM node reference. See relative and absolute-positioned examples.
* **useMeltEffect** = (default = true)
When recycling fallen snow (or rarely, when falling), have it "melt" and fade out if browser supports it
* **useTwinkleEffect** = (default = true)
Allow snow to randomly "flicker" in and out of view while falling
* **usePositionFixed** = (default = false)
true = snow not affected by window scroll. may increase CPU load, disabled by default - if enabled, used only where supported.
* **vMaxY** = (default = 5) and **vMaxX** = (default = 8)
Defines maximum X and Y velocities for the storm; a random value in this range is selected for each snowflake.