Snowfall component for React -- Let it snow on your page! ❄
npm:
npm install react-snowf --saveimport Snowf from 'react-snowf';
// Insert component in your code
<Snowf
amount={50}
size={5}
speed={1.5}
wind={0}
color="#fff"
opacity={0.8}
swing={1}
image={null}
zIndex={null}
resize={true}
/>| Argument | Type | Default Value | Description |
|---|---|---|---|
| amount | Number | 50 | Number of snowflakes displayed at a time. |
| size | Number | 5 | Size of snowflakes. |
| speed | Number | 1.5 | Vertical speed of snowflakes. The larger, the snowflakes drop faster. |
| wind | Number | 0 | Horizontal wind power. Wind will blow right if this is a positive number, and a negative number makes wind blow left. |
| color | String | '#fff' | Color of snowflakes. This option accepts HEX or RGB color code, such as "#fff", "#ffffff", "rgb(255,255,255)". |
| opacity | Number | 0.8 | The max opacity of snowflakes. The plugin will generate snowflakes with different opacity from 0 to this number. |
| swing | Number | 1 | Swing offset of snowflakes. If you don't want them to swing, set this option as 0. |
| image | String | null | Set this option to replace the snowflake with your image. |
| zIndex | Number | null | Position of the canvas layer. Set the layer front or back by changing this value. |
| resize | Boolean | true | Adjust canvas size and snowflakes position automatically or not. |
snowf (use snowf with Vanilla JS)
vue-snowf (use snowf with Vue)
react-snowf is open source and released under the MIT Licence.
Copyright (c) 2017 Fuxy526