cahilfoley
React Snowfall
A react component that creates a snowfall effect
Installation
With npm
npm i react-snowfallOr with yarn
yarn add react-snowfallUsage
Basic usage requires no properties - it will grow to fill the nearest relative positioned parent element.
import React from 'react'
import ReactDOM from 'react-dom'
import Snowfall from 'react-snowfall'
ReactDOM.render(
<div style={{ height: 400, width: 400, background: '#282c34', position: 'relative' }}>
<Snowfall />
</div>,
document.querySelector('#app'),
)Configuration
An optional color, style, and snowflakeCount property can be passed in to the component.
<Snowfall
// Changes the snowflake color
color="red"
// Applied to the canvas element
style={{ background: '#fff' }}
// Controls the number of snowflakes that are created (default 150)
snowflakeCount={200}
/>Using Images
Instead of rendering colored circles you can instead pass in an array of image elements that will be randomly selected and used as the snowflake instead.
NOTE: If the images provided are not square they will be stretched into a 1:1 aspect ratio.
const snowflake1 = document.createElement('img')
snowflake1.src = '/assets/snowflake-1.png'
const snowflake2 = document.createElement('img')
snowflake2.src = '/assets/snowflake-2.jpg'
const images = [snowflake1, snowflake2]
const Demo = () => {
return (
<Snowfall
// Applied to the canvas element
style={{ background: '#fff' }}
// Controls the number of snowflakes that are created (default 150)
snowflakeCount={200}
// Pass in the images to be used
images={images}
>
)
}Positioning
The snowfall container is absolute positioned and has the following default styles (see the definition):
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;If you want the component to cover the entire screen then you can change the position to fixed and using vw/vh units by passing in an overriding styles object:
<Snowfall
style={{
position: 'fixed',
width: '100vw',
height: '100vh',
}}
/>