README

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
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

Usage no npm install needed!