In this article, we will see how to create a plane in React using React-Three-Fiber. Planes are widely used shapes in 3D rendering. We will create a 2D plane for now, but you can add orbital controls in it to make it 3D. We will also use lighting and different colors. Let's get started.ExampleFirst install the following package −npm i --save @react-three/fiber threethreejs and react-three/fiber will be used to add webGL renderer to the website and three-fiber will be used to connect threejs and React.Add the following lines of code in App.js −import { Canvas } from "@react-three/fiber"; export ... Read More

In this article, we will see how to make a customizable modal in React JS with multiple buttons which can be used in many types of projects like on landing pages or travel websites. A modal is a message box that is displayed on top of the screen. We can use Modals as a subscription box; we can also add animation to a Modal using CSS.ExampleFirst create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeDownload and install the react-modal package −npm i --save react-modalWe can use this package to add simple premade modals inside any React ... Read More

"Particle animation" is a technique in game physics, motion graphics, and computer graphics that uses many minute sprites, 3D models, or other graphic objects to simulate certain kinds of "fuzzy" phenomena.In this article, we will see how to make a popular particle animation in React JS. We will do this using a third-party package called "react-tsparticles".First create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeExampleDownload and install the "react-tsparticles" package −npm install react-tsparticles reactWe will use this package to add default particle animations with different styling elements. You can also add id and different options for ... Read More

In this article, we will see how to create an Excel-like data grid in React JS frontend. We will use a third-party package for this, which is called react-data-grid. This is a useful package if you are working with data and want to make a dashboard application.First create a react project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurpose ExampleDownload and install the react-data-grid package −npm i --save react-data-gridWe can use this package to add default styled grid tables or you can say data grids which are premade.Add the following lines of code in App.js −import DataGrid from "react-data-grid"; ... Read More

In this article, we will see how to make an animated loader in React.js. Animated loaders are used in many websites to enhance the look and feel. In React.js, we can use the react-spinkit package to create beautiful animated loaders easily without having to write hundreds of lines of CSS.First create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeExampleInstall the react-spinkit package −npm i --save react-spinkitThis library provides premade loaders and it is really easy to add it in your project. Using spinner, you can add any animated loader in React.Add the following lines of code ... Read More

In this article, we will see how to add OrbitControls in React using react-three-fiber. It is like making a camera; we can move on screen and view each side of any 3D object. We can use OrbitControl to provide zoom and sliding effects too. So, let's get started.ExampleInstall the react-three/fiber library −npm i --save @react-three/fiber threethreejs and react-three/fiber will be used to add webGL renderer to the website. three-fiber will be used to connect threejs and react.First create an orbital control object in App.js −import React, { useEffect } from "react"; import { Canvas, useThree } from "@react-three/fiber"; import { OrbitControls ... Read More

In this article, we will see how to make a wobbling cube in React, which will be wobbling in a loop and spinning at same time. We will first make a cube and then add the wobbling effect. We can also add a feature to make the cube wobble on hovering. So, let's get started.ExampleFirst download the react-three-fiber package −npm i --save @react-three/fiber npm i --save @react-three/drei npm i --save threethreejs and react-three/fiber will be used to add webGL renderer to the website. react-three/fiber will be used to connect threejs and React. drei is used to add wobblingMesh.Add the following ... Read More

In this article, we will see how to create a timer in React using react-spring animation. Spring animation is a new type of method which is used to add animation in a different way. It is a more precise and modern way to add animation in React.js. Using react-spring, we can create effects like fade-in, fade-out, bounce, etc.First create a React project −npx create-react-app firstprojectNow go to the project directory −cd firstprojectExampleInstall the react-spring package −npm install react-springreact-spring is used to add spring concept based animations to our website. We can use this library to add different type of animations.Let ... Read More

In this article, we will see how to add a tilt-on-hover effect in React.js without using CSS. We are going to add tilt animation effect on the element. This type of effect can immediately attract user's attention, as it will tilt a specific part on hovering while keeping the other elements at their original place.ExampleFirst download the react-parallax-tilt package −npm i --save react-parallax-tiltThis library is used to import the container which will add tilt effect to any element.Add the following lines of code in App.js −import Tilt from "react-parallax-tilt"; function App() {    return (     ... Read More

In this article, we will see how to make a resizable element in React JS. We always create resizable textarea in HTML, but when it comes to creating other elements resizable, it seems impossible. In React, we can create resizable elements easily using a simple library.ExampleFirst install the following package −npm install --save re-resizablere-resizable is used to import a resizable container which will be used to add Resizable functionality to any DOM element.Add the following lines of code in App.js −import React, { useState } from "react"; import { Resizable } from "re-resizable"; export default function App() {    const ... Read More