Design Converter
Education
Last updated on Oct 24, 2023
•7 mins read
Last updated on Oct 15, 2023
•7 mins read
React Particles is a powerful library used to create interactive particle systems in a React app. It is based on the Particles.js library but offers more advanced features and is actively maintained. React Particles allows developers to create stunning visual effects on their websites, enhancing user engagement and experience. The particles can be customized in various ways, including size, color, shape, and movement patterns.
Particles JS is a JavaScript library that allows developers to create interactive particles on their websites. The particles can react to user interactions, such as mouse movements and clicks, creating a dynamic and engaging user experience. The library provides a wide range of customization options, allowing developers to create unique particle effects. The same core functionality is available in React Particles JS, making it a popular choice for developers working with React.
1// Importing Particles JS 2import Particles from 'particles.js'; 3
To install React Particles JS, you can use either npm or yarn. The npm install react particles command installs the library in your project, while the yarn add react command does the same but uses yarn instead of npm. Both commands should be run in the terminal or command prompt of your operative system.
1// Using npm 2npm install react-particles-js 3 4// Using yarn 5yarn add react-particles-js 6
To create a new React app with React Particles JS, you first need to install the create react app tool. This tool is the easiest method to set up a new React project. After installing the tool, you can create a new project and then install the React Particles JS library.
1// Installing create react app 2npm install -g create-react-app 3 4// Creating a new project 5npx create-react-app my-app 6 7// Navigating into the project directory 8cd my-app 9 10// Installing React Particles JS 11npm install react-particles-js 12
After installing React Particles JS, you can import particles into your React components. You can then create a particles instance, which will be used to control the behavior of the particles.
1// Importing React and Particles 2import React from 'react'; 3import Particles from 'react-particles-js'; 4 5// Creating a particles instance 6const particlesOptions = { 7 particles: { 8 number: { 9 value: 80, 10 density: { 11 enable: true, 12 value_area: 800 13 } 14 } 15 } 16}; 17 18// Using the particles instance in a component 19function App() { 20 return ( 21 <div className="App"> 22 <Particles params={particlesOptions} /> 23 </div> 24 ); 25} 26 27export default App; 28
In the above code, the particlesOptions object defines the parameters configuration for the particles. The number property sets the number of particles, and the density property controls the distribution of the particles. The Particles component then uses these options to render the particles on the screen.
Particles JS allows you to customize the appearance and behavior of the particles through a variety of parameters. For example, you can change the particle shape, color, size, and movement speed. You can also add custom shapes by defining a polygon path for the particles to follow.
1// Configuring parameters 2const particlesOptions = { 3 particles: { 4 shape: { 5 type: 'circle', // Change to 'polygon' for custom shapes 6 stroke: { 7 width: 2, 8 color: '#f00' 9 } 10 }, 11 move: { 12 speed: 10 13 } 14 } 15}; 16 17// Adding custom shapes 18particlesJS('particles-js', { 19 particles: { 20 shape: { 21 type: 'polygon', 22 polygon: { 23 nb_sides: 5 24 } 25 } 26 } 27}); 28
In the above code, the shape.type property sets the shape of the particles, and the shape.stroke property sets the stroke color and width. The move.speed property controls the movement speed of the particles. For custom shapes, the shape.type property is set to 'polygon', and the shape.polygon.nb_sides property sets the number of sides for the polygon.
React Tsparticles is a fork of React Particles JS that offers the same core functionality but with additional features and improvements. It includes more options for customization, better performance, and improved compatibility with other libraries and frameworks. React Tsparticles is also actively maintained and regularly updated, making it a reliable choice for modern web development.
1// Importing React Tsparticles 2import Particles from 'react-tsparticles'; 3 4// Using React Tsparticles in a component 5function App() { 6 return ( 7 <div className="App"> 8 <Particles 9 id="tsparticles" 10 options={{ 11 background: { 12 color: { 13 value: "#0d47a1", 14 }, 15 }, 16 fpsLimit: 60, 17 interactivity: { 18 detectsOn: "canvas", 19 events: { 20 onClick: { 21 enable: true, 22 mode: "push", 23 }, 24 onHover: { 25 enable: true, 26 mode: "repulse", 27 }, 28 resize: true, 29 }, 30 modes: { 31 bubble: { 32 distance: 400, 33 duration: 2, 34 opacity: 0.8, 35 size: 40, 36 }, 37 push: { 38 quantity: 4, 39 }, 40 repulse: { 41 distance: 200, 42 duration: 0.4, 43 }, 44 }, 45 }, 46 particles: { 47 color: { 48 value: "#ffffff", 49 }, 50 links: { 51 color: "#ffffff", 52 distance: 150, 53 enable: true, 54 opacity: 0.5, 55 width: 1, 56 }, 57 collisions: { 58 enable: true, 59 }, 60 move: { 61 direction: "none", 62 enable: true, 63 outMode: "bounce", 64 random: false, 65 speed: 6, 66 straight: false, 67 }, 68 number: { 69 density: { 70 enable: true, 71 value_area: 800, 72 }, 73 value: 80, 74 }, 75 opacity: { 76 value: 0.5, 77 }, 78 shape: { 79 type: "circle", 80 }, 81 size: { 82 random: true, 83 value: 5, 84 }, 85 }, 86 detectRetina: true, 87 }} 88 /> 89 </div> 90 ); 91} 92 93export default App; 94
In the above code, the Particles component from the React Tsparticles library is used to create a particle system. The options prop is used to configure the appearance and behavior of the particles. The id prop is used to assign a unique identifier to the particle system, which can be used for styling and scripting purposes.
React Particles JS allows you to use a canvas element to render the particles. This provides better performance and more flexibility compared to using HTML elements. You can also use an SVG path to define the shape of the particles, allowing for more complex and creative designs.
1// Using a canvas element 2<Particles canvasClassName="myCanvas" /> 3 4// Using an SVG path 5particlesJS('particles-js', { 6 particles: { 7 shape: { 8 type: 'image', 9 image: { 10 src: 'path_to_your_svg.svg', 11 width: 100, 12 height: 100 13 } 14 } 15 } 16}); 17
In the above code, the canvasClassName prop is used to assign a class name to the canvas element. The shape.type property is set to 'image', and the shape.image.src property is used to specify the SVG path. The shape.image.width and shape.image.height properties are used to set the size of the particles.
While working with React Particles JS, you may encounter errors or issues. The library provides an error log that can help you identify and resolve these issues. If you encounter an error, you can check the error log for more information.
1// Checking the error log 2console.log(particlesJS.errors); 3
In the above code, the errors property of the particlesJS object is logged to the console. This will display any errors that have occurred while using the library.
React Particles JS offers several advanced features that can enhance your website's interactivity and visual appeal. For example, you can use the library to create particles that react to user interactions, such as mouse movements and clicks. You can also use the library to create complex particle effects, such as explosions or fireworks.
Despite these advanced features, React Particles JS maintains backward compatibility with older versions of the library. This means that you can upgrade to the latest version of the library without worrying about breaking your existing code.
1// Creating interactive particles 2particlesJS('particles-js', { 3 interactivity: { 4 events: { 5 onhover: { 6 enable: true, 7 mode: 'repulse' 8 }, 9 onclick: { 10 enable: true, 11 mode: 'push' 12 } 13 } 14 } 15}); 16
In the above code, the interactivity.events.onhover and interactivity.events.onclick properties are used to configure the particles to react to mouse hover and click events, respectively.
React Particles JS has significantly impacted web development by allowing developers to create interactive and visually appealing websites with ease. The library provides a wide range of customization options, making it possible to create unique particle effects that can enhance user engagement and experience. Whether you're a seasoned developer or just starting out, React Particles JS is a powerful tool that can help you create stunning websites.
Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!
You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.