React Snowflakes

!Frank Sinatra

> “Let it snow on your React website!” – Frank Sinatra¹

How to use?

``jsx
import {DepthOfFieldSnowfall} from 'react-snowflakes';

// Insert anywhere in your code and that's it!
style={{
// Position must be relative or absolute,
// because snowflakes are positioned absolutely.
position: 'relative',
width: '300px',
height: '300px'
}}/>
`

You can have more control over snowflakes with Snowfall:

`jsx
import {Snowfall, Snowflake} from 'react-snowflakes';

style={{
position: 'relative',
width: '300px',
height: '300px'
}}
snowflakeFactory={index => {
const size = index / count;
const w = 5 + 10 * size + 'px';
return (
xSpeedPrc={.3 * size}
ySpeedPrc={.1 * size}
style={{
width: w,
height: w,
borderRadius: '50%',
backgroundColor: 'white',
opacity: .2 + .8 * size,
filter: blur(${Math.round(Math.max(size - .5, 0) * 15)}px)
}}/>
)
}}/>
``

License

The code is available under MIT licence.