An Interest In:
Web News this Week
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
- April 16, 2024
- April 15, 2024
- April 14, 2024
Some of Our Sources
- Mashable
- Just Creative
- Pearsonified
- Smashing Magazine
- Web Design Ledger
- Reencoded
- Specky Boy
- Freelance Switch
- Willems Lab
- Dev To
Help Webnuz
Referal links:
How to use Particles Js in React with react-tsparticles.
Particle.js is a great JavaScript library for creating 2d as well as 3d looking particles on your website.
But using Particle.js is not an easy task so there is a new version of Particles.js created for Component based frameworks like React, Vue and Angular which is recoded in TypeScript and is called TsParticles and has a special package for easy integration in React called as react-tsparticles.
react-tsparticles is an awesome package for creating particles in React.js.
Prerequisites
Create a new new React app with npx create-react-app my-app or you can continue with your existing app if you have already created.
Now we'll have an App.js file in my case here it is after some editing.
import "./styles.css";export default function App() { return ( <div className="App"> <h1>Hello Coders!</h1> </div> );} How to use react-tsparticles in React.js
First of all you have to install react-tsparticles as well as tsparticles as react-tsparticles depends upon it.
npm i react-tsparticlesnpm i tsparticles
if any legacy error shows up use --force
npm i react-tsparticles --forcenpm i tsparticles --force
Now import Particles from react-tsparticles and { loadFull } from tsparticles.
import "./styles.css";import Particles from "react-tsparticles";import { loadFull } from "tsparticles";export default function App() { return ( <div className="App"> <h1>Hello Coders!</h1> </div> );}Now we can use Particles component by passing some props such as id, init which is going to be an initialization function, options which is going to be the configurations for particles which we want to display or url to use options from a remote url with a json url.
import "./styles.css";import Particles from "react-tsparticles";import { loadFull } from "tsparticles";export default function App() { return ( <div className="App"> <h1>Hello Coders!</h1> <Particles id="particles-here" init={anInitFunction} options={ // an config object } /> </div> );}Below is the working code for above method
import "./styles.css";import Particles from "react-tsparticles";import { loadFull } from "tsparticles";export default function App() { const particlesInit = async (main) => { console.log(main); // 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(main); }; return ( <div className="App"> <h1>Hello Coders!</h1> <Particles id="tsparticles" init={particlesInit} options={{ "fullScreen": { "enable": true, "zIndex": 1 }, "particles": { "number": { "value": 10, "density": { "enable": false, "value_area": 800 } }, "color": { "value": "#fff" }, "shape": { "type": "star", "options": { "sides": 5 } }, "opacity": { "value": 0.8, "random": false, "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 4, "random": false, "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "rotate": { "value": 0, "random": true, "direction": "clockwise", "animation": { "enable": true, "speed": 5, "sync": false } }, "line_linked": { "enable": true, "distance": 600, "color": "#ffffff", "opacity": 0.4, "width": 2 }, "move": { "enable": true, "speed": 2, "direction": "none", "random": false, "straight": false, "out_mode": "out", "attract": { "enable": false, "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "events": { "onhover": { "enable": true, "mode": ["grab"] }, "onclick": { "enable": false, "mode": "bubble" }, "resize": true }, "modes": { "grab": { "distance": 400, "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, "size": 40, "duration": 2, "opacity": 8, "speed": 3 }, "repulse": { "distance": 200 }, "push": { "particles_nb": 4 }, "remove": { "particles_nb": 2 } } }, "retina_detect": true, "background": { "color": "#111", "image": "", "position": "50% 50%", "repeat": "no-repeat", "size": "cover" } }} /> </div> );}and you'll get this
now you can mess around with options and below is the GitHub repo of list of different presets that you can use to get different particles.
tsparticles presets
PS: This is my first post and I am looking for your suggestions and of course I'll improve this post with more information.
Original Link: https://dev.to/tauleshwar/how-to-use-particles-js-in-react-with-react-tsparticles-3dpl
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To