https://github.com/tsparticles/preact
Preact.js tsParticles official component
https://github.com/tsparticles/preact
hacktoberfest javascript preact tsparticles typescript
Last synced: about 1 month ago
JSON representation
Preact.js tsParticles official component
- Host: GitHub
- URL: https://github.com/tsparticles/preact
- Owner: tsparticles
- License: mit
- Created: 2022-11-11T00:30:12.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-04-08T11:10:47.000Z (about 1 month ago)
- Last Synced: 2025-04-08T12:24:25.765Z (about 1 month ago)
- Topics: hacktoberfest, javascript, preact, tsparticles, typescript
- Language: JavaScript
- Homepage:
- Size: 478 KB
- Stars: 8
- Watchers: 3
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
[](https://particles.js.org)
# @tsparticles/preact
[](https://www.npmjs.com/package/@tsparticles/preact) [](https://www.npmjs.com/package/@tsparticles/preact) [](https://github.com/sponsors/matteobruni)
Official [tsParticles](https://github.com/matteobruni/tsparticles) Preact component
[](https://join.slack.com/t/tsparticles/shared_invite/enQtOTcxNTQxNjQ4NzkxLWE2MTZhZWExMWRmOWI5MTMxNjczOGE1Yjk0MjViYjdkYTUzODM3OTc5MGQ5MjFlODc4MzE0N2Q1OWQxZDc1YzI) [](https://discord.gg/hACwv45Hme) [](https://t.me/tsparticles)
[](https://www.producthunt.com/posts/tsparticles?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-tsparticles") 
## Installation
```shell
npm install @tsparticles/preact
```
or
```shell
yarn add @tsparticles/preact
```
## How to use
### Code
Examples:
_Remote url_
```javascript
import Particles, { initParticlesEngine } from "@tsparticles/preact";
import { loadFull } from "tsparticles";
class App extends Component {
state = {
particlesInitialized: false,
};
constructor(props) {
super(props);
this.particlesLoaded = this.particlesLoaded.bind(this);
initParticlesEngine(async engine => {
// you can initialize the tsParticles instance (main) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
await loadFull(engine);
}).then(() => {
this.setState({
particlesInitialized: true,
});
});
}
particlesLoaded(container) {
console.log(container);
}
render() {
if (!this.state.particlesInitialized) {
return null;
}
return (
);
}
}
```
_Options object_
```javascript
import Particles from "@tsparticles/preact";
import { loadFull } from "tsparticles";
class App extends Component {
state = {
particlesInitialized: false,
};
constructor(props) {
super(props);
this.particlesLoaded = this.particlesLoaded.bind(this);
initParticlesEngine(async engine => {
// you can initialize the tsParticles instance (main) here, adding custom shapes or presets
// this loads the tsparticles package bundle, it's the easiest method for getting everything ready
// starting from v2 you can add only the features you need reducing the bundle size
await loadFull(engine);
}).then(() => {
this.setState({
particlesInitialized: true,
});
});
}
particlesLoaded(container) {
console.log(container);
}
render() {
if (!this.state.particlesInitialized) {
return null;
}
return (
);
}
}
```
### Props
| Prop | Type | Definition |
| --------------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
| id | string | The id of the element. |
| width | string | The width of the canvas. |
| height | string | The height of the canvas. |
| options | object | The options of the particles instance. |
| url | string | The remote options url, called using an AJAX request |
| style | object | The style of the canvas element. |
| className | string | The class name of the canvas wrapper. |
| canvasClassName | string | the class name of the canvas. |
| container | object | The instance of the [particles container](https://particles.js.org/docs/modules/Core_Container.html) |
| particlesLoaded | function | This function is called when particles are correctly loaded in canvas, the current container is the parameter and you can customize it here |
Find your parameters configuration [here](https://particles.js.org).
## Demos
The demo website is [here](https://particles.js.org)
There's also a CodePen collection actively maintained and updated [here](https://codepen.io/collection/DPOage)