react-snowfetti
Generates random particles using html5 canvas API.
react-snowfetti
exposes an interface to create snow for the holidays or confetti when you're celebrating!
Inspired by this codepen.
snow
confetti
interface
const palette = '#55476a' '#ae3d63' '#db3853' '#f45c44' '#f8b646'; const snowfettiStyles = backgroundColor: '#0a2933'; <Snowfetti profile= 'confetti' 'steady' palette amount= 800 width= 600 height= 300 styles= snowfettiStyles />
properties
profile (Array) - optional
Denotes the visual profile of the rendered particles on the canvas. The profile accepts three values:
- type (String):
'snow'
'confetti'
- velocity (String):
'slow'
'steady'
'fast'
- palette (Array): contains hex color strings
Defaults to type 'snow'
and velocity 'slow'
.
amount (Number) - optional
Denotes the amount of particles that will be rendered on the canvas.
Defaults to 800
particles.
width (Number) - optional
Denotes the canvas width.
Defaults to 600
.
height (Number) - optional
Denotes the canvas height.
Defaults to 300
.
styles (Object) - optional
Denotes the canvas css styles.
Defaults to backgroundColor: '#0a2933'
, position: 'absolute'
with top: 0
and left: 0
.
peer dependencies
react-snowfetti
has a dependency on react version ^0.14.3
.
This dependency must be fulfilled by the consumer of
react-snowfetti
.
usage
First install the package together with react in your project using npm:
npm i -S react-snowfetti react
Then import the package in your consumer application:
;; });
todos
- write tests
- add code coverage
- add CI
- add support for confetti color sets
- fade out confetti particles
- make particle flow direction be affected by mouse cursor
- add README.md badges