How to easily add particles, confetti or fireworks effects to a Solid.js applica...
source link: https://dev.to/matteobruni/how-to-easily-add-particles-confetti-or-fireworks-effects-to-a-solid-js-application-32l2
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
How to easily add particles, confetti or fireworks effects to a Solid.js application
Jul 21
・2 min read
Solid.js Particles (solid-particles
)
Official tsParticles Solid.js component
I just want code sample
Here the working sample, without any additional text, if someone wants just to see it working and experiment with the code
Now let's see how to achieve this
Installation
npm install solid-particles solid-js
yarn add solid-particles solid-js
How to use
Examples:
Remote url
import Particles from "solid-particles";
function App() {
return (
<div class="App">
<Particles
id="tsparticles"
options={{
background: {
color: "#000",
},
fullScreen: {
enable: true,
},
}}
/>
</div>
);
}
Options object
import Particles from "solid-particles";
class App extends Component {
constructor(props) {
super(props);
this.particlesInit = this.particlesInit.bind(this);
this.particlesLoaded = this.particlesLoaded.bind(this);
}
particlesInit(main) {
console.log(main);
// you can initialize the tsParticles instance (main) here, adding custom shapes or presets
}
particlesLoaded(container) {
console.log(container);
}
render() {
return (
<Particles
id="tsparticles"
init={this.particlesInit}
loaded={this.particlesLoaded}
options={{
background: {
color: {
value: "#0d47a1",
},
},
fpsLimit: 60,
interactivity: {
detectsOn: "canvas",
events: {
onClick: {
enable: true,
mode: "push",
},
onHover: {
enable: true,
mode: "repulse",
},
resize: true,
},
modes: {
bubble: {
distance: 400,
duration: 2,
opacity: 0.8,
size: 40,
},
push: {
quantity: 4,
},
repulse: {
distance: 200,
duration: 0.4,
},
},
},
particles: {
color: {
value: "#ffffff",
},
links: {
color: "#ffffff",
distance: 150,
enable: true,
opacity: 0.5,
width: 1,
},
collisions: {
enable: true,
},
move: {
direction: "none",
enable: true,
outMode: "bounce",
random: false,
speed: 6,
straight: false,
},
number: {
density: {
enable: true,
value_area: 800,
},
value: 80,
},
opacity: {
value: 0.5,
},
shape: {
type: "circle",
},
size: {
random: true,
value: 5,
},
},
detectRetina: true,
}}
/>
);
}
}
Props
Prop Type Definition 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
init function This function is called after the tsParticles instance initialization, the instance is the parameter and you can load custom presets or shapes here loaded 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.
Demos
You can see the official sample created using CodeSandbox here
The demo website is here
There's also a CodePen collection actively maintained and updated here
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK