JSPM

react-snowf

0.0.3
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 9
  • Score
    100M100P100Q47907F
  • License MIT

Snowfall component for React -- Let it snow on your page! ❄

Package Exports

  • react-snowf

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-snowf) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-snowf

Version Downloads License

Snowfall component for React -- Let it snow on your page! ❄

Install

npm:

npm install react-snowf --save

Usage

import 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}
/>

Default Options

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.

Others

snowf (use snowf with Vanilla JS)

vue-snowf (use snowf with Vue)

Licence

react-snowf is open source and released under the MIT Licence.

Copyright (c) 2017 Fuxy526