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:

import React from 'react';
import Snowfetti from 'react-snowfetti';

export React.createClass({
	render () {
		return <Snowfetti />;
	}
});

todos

• [ ] write tests
• [x] add code coverage
• [x] add CI
• [x] add support for confetti color sets
• [x] fade out confetti particles
• [x] make particle flow direction be affected by mouse cursor
• [x] add README.md badges