react-snowfetti

1.2.4 • Public • Published

react-snowfetti

NPM Version Build Status Coverage Status

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

snow

confetti

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

Package Sidebar

Install

npm i react-snowfetti

Weekly Downloads

106

Version

1.2.4

License

MIT

Last publish

Collaborators

  • danillouz