ember-confetti
Advanced tools
This addon exposes an {{confetti-rain}} component for your ember application.
You can see it in action in this demo page.
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}}
By default, a total of 150 particles are rendered, you can change this number by setting maxParticles.
{{confetti-rain maxParticles=10}}
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.
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.
To install the addon just run
$ ember install ember-confetti
$ git clone https://github.com/san650/ember-confetti
$ cd $_
$ yarn
Running tests
$ yarn test
The confetti idea is based on Linmiao Xu's codepen http://codepen.io/linrock/pen/Amdhr
ember-confetti is licensed under the MIT license.
See LICENSE for the full license text.
FAQs
Confetti rain components for Ember applications
We found that ember-confetti demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.