tsparticles-preset-blossom-ver1
v1.0.2
Published
tsParticles blossom falling preset V1
Downloads
10
Maintainers
Readme
tsParticles Blossom Preset V1
Sample
This is my presset for tsparticles
You can find more details at tsparticles's document and its github repository
How to use it
React.js / Preact / Inferno
The syntax for React.js
, Preact
and Inferno
is the same.
This sample uses the class component syntax, but you can use hooks as well (if the library supports it).
import Particles from "react-tsparticles";
import { Main } from "tsparticles";
import { loadBlossomFallingV1 } from "tsparticles-preset-blossom-ver1";
export class ParticlesContainer extends React.PureComponent<IProps> {
// this customizes the component tsParticles installation
customInit(main: Main) {
// this adds the preset to tsParticles, you can safely use the
loadFirePreset(main);
}
render() {
const options = {
preset: "blossomFallV1",
};
return <Particles options={options} init={this.customInit} />;
}
}
If you preffer using function :
import Particles from "react-tsparticles";
import { loadBlossomFallingV1 } from "tsparticles-preset-blossom-v1";
import { Main } from "tsparticles";
function particlesInit(Main) {
loadBlossomFallingV1(Main);
}
export default function Blosom() {
return (
<Particles
options={{
preset: "blossomFallV1",
}}
init={particlesInit}
/>
);
}
Customization
Important ⚠️
You can override all the options defining the properties like in any standard tsParticles
installation.
const options = {
background: {
color: "",
},
preset: "blossomFallV1",
};
Options
You can find all options available here 📖