Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tsparticles/ember
tsParticles Official Ember.js component
https://github.com/tsparticles/ember
ember emberjs hacktoberfest javascript tsparticles typescript
Last synced: 3 days ago
JSON representation
tsParticles Official Ember.js component
- Host: GitHub
- URL: https://github.com/tsparticles/ember
- Owner: tsparticles
- License: mit
- Created: 2022-12-27T16:05:22.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-05-30T07:06:28.000Z (over 1 year ago)
- Last Synced: 2024-09-26T11:38:58.645Z (7 days ago)
- Topics: ember, emberjs, hacktoberfest, javascript, tsparticles, typescript
- Language: TypeScript
- Homepage:
- Size: 1.47 MB
- Stars: 6
- Watchers: 4
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://particles.js.org)
# ember-tsparticles
An Ember.js component for using [tsParticles](https://github.com/matteobruni/tsparticles). Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website.
## Compatibility
* Ember.js v3.28 or above
* Ember CLI v3.28 or above
* Node.js v14 or above
## Installation
```bash
npm install ember-tsparticles
# or
yarn add ember-tsparticles
# or
pnpm install ember-tsparticles
# or
ember install ember-tsparticles
```
## Usage
For the most basic usage of the component you can pass a configuration object via the `options` argument and initialize the tsparticles features you need in the `particlesInit` callback.
By default `tsparticles` doesn't load any extensions required to render particles. Extensions can be loaded on a granular level which has the benefit that only what is required is loaded, but to start out it can be useful to load all options via the `loadFull` function of `tsparticles`.
For the configuration object API documentation, see the [tsparticles repository](https://github.com/matteobruni/tsparticles).
```bash
npm install tsparticles
```
```hbs
```
```js
import { Component } from '@glimmer/component';
import { loadFull } from 'tsparticles';
export default class ExampleComponent extends Component {
options = {
particles: {
color: {
value: '#000',
},
links: {
enable: true,
color: '#000',
},
move: {
enable: true,
},
},
};
async particlesInit(engine) {
await loadFull(engine);
}
}
```
### With template import syntax
When using [ember-template-imports](https://github.com/ember-template-imports/ember-template-imports) the example above would look like this, using the `.gjs` file extension.
```js
import { loadFull } from 'tsparticles';
import Particles from 'ember-tsparticles/components/particles';
const options = {
particles: {
color: {
value: '#000',
},
links: {
enable: true,
color: '#000',
},
move: {
enable: true,
},
},
};
const particlesInit = async (engine) => {
await loadFull(engine);
};
```
### Using presets
Presets are offered by `tsparticles` which allow to use premade configuration objects. Refer to the [presets](https://github.com/matteobruni/tsparticles#Presets) section in the `tsparticles` repository to view all existing presets.
```bash
npm install tsparticles-preset-confetti
```
```hbs
```
```js
import { Component } from '@glimmer/component';
import { loadConfettiPreset } from 'tsparticles-preset-confetti';
export default class ConfettiComponent extends Component {
async loadPreset(engine) {
await loadConfettiPreset(engine);
}
}
```
### Loading options from an URL
Options can also be passed via link with the `url` argument. These will be fetched once the component renders.
```hbs
```
```js
import { Component } from '@glimmer/component';
import { loadFull } from 'tsparticles';
export default class ExampleComponent extends Component {
async particlesInit(engine) {
await loadFull(engine);
}
}
```
### Particles loaded callback
Further customization to the `tsparticles` container can be done by using the `particlesLoaded` callback argument. This callback passes the container instance for that particular component.
```hbs
```
```js
import { Component } from '@glimmer/component';
import { loadFull } from 'tsparticles';
export default class ExampleComponent extends Component {
async particlesInit(engine) {
await loadFull(engine);
}
loadedCallback(container) {
console.log(
'A callback function can be passed which triggers when the particles are loaded',
container
);
}
}
```
## Contributing
See the [Contributing](CONTRIBUTING.md) guide for details.
## License
This project is licensed under the [MIT License](LICENSE.md).