Home

Awesome

ember-confetti

Build Status Ember Observer Score

This addon exposes an {{confetti-rain}} component for your ember application.

Sample

You can see it in action in this demo page.

Usage

Install the addon and insert the component in any template.

{{confetti-rain}}

The component will start a confetti rain when rendered or you can toggle the rain by setting the isEnabled attribute.

{{!--

  No confetti rain :-(

--}}

{{confetti-rain isEnabled=false}}

Number of particles

By default, a total of 150 particles are rendered, you can change this number by setting maxParticles.

{{confetti-rain maxParticles=10}}

Overriding z-index

By default z-index is set to max 32bit integer value, to override this you can set a custom class to the component and set your desired z-index value.

{{confetti-rain class="my-confetti"}}

.my-confetti {
  z-index: 10!important;
}

Note that you need to use the !important suffix so the rule is applied correctly.

Full screen

By default confetti-rain component will fill parent's container. If you want to render the component to fill the entire screen you can use ember-wormhole to achieve this.

$ ember install ember-wormhole

And then you can change your templates like this

my-foo-component.hbs

{{#ember-wormhole to="my-container"}}
  {{confetti-rain}}
{{/ember-wormhole}}

And place the container at <body> level.

application.hbs

{{yield}}
<div id="my-container"></div>

And that's it, now the parent container for the confetti-rain component will be the <body> tag.

Installation

To install the addon just run

$ ember install ember-confetti

Development

$ git clone https://github.com/san650/ember-confetti
$ cd $_
$ yarn

Running tests

$ yarn test

Project's health

Build Status Ember Observer Score

Acknowledgement

The confetti idea is based on Linmiao Xu's codepen http://codepen.io/linrock/pen/Amdhr

License

ember-confetti is licensed under the MIT license.

See LICENSE for the full license text.