Found 198 Articles for React JS

Create a Scatter Chart using Recharts in ReactJS

Mayank Agarwal
Updated on 21-Apr-2022 12:26:35

1K+ Views

In this article, are going to explore the Rechart JS Library and implement it in a React application to watch how they are used. Rechart Libraries are specifically used for creating different types of charts over the React Application. Charts that can be built using this library are Line Charts, Bar Charts, Pie Charts, Scatter Charts, etc.In this tutorial, we will create a Scatter Chart with the required data points and display the same to the user. The dataset for the scatter chart will have x and y coordinate details. Then with the help of a Cartesian product, we will ... Read More

Adding an animated loader and splash screen in a React Native app

Ath Tripathi
Updated on 29-Sep-2021 09:48:24

438 Views

In this article, we will see how to implement a Lottie animation in a React Native app. Lottie is an open source animation file format that’s tiny, high quality, interactive, and can be manipulated at runtime. Lottie animations are mainly used for loader screen or as a start screen.So, let's add a Lottie animation to our React Native mobile app.ExampleGo to the official Lottie animation website and download Lottie JSON.Link to animation that I am going to use −https://lottiefiles.com/74546-character-02# /Name the JSON file "myloader.json" and keep it at the same level as App.js.Now install the lottie-react-native packagenpm i --save lottie-react-nativeLottie ... Read More

Creating a QR Code of a link in React JS

Ath Tripathi
Updated on 29-Sep-2021 09:44:13

2K+ Views

In this article, we will see how to create a QR code of a link in React JS. A QR code is a two-dimensional barcode that is readable on smartphones. You must have seen QR codes on websites that you can scan which redirects you to a page. For example, to access WhatsApp from your laptop, you can go to "web.whatsapp.com" and then open WhatsApp on your phone and scan the given QR code.ExampleFirst create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeInstall the qrcode.react package −npm i --save qrcode.reactThis library is going to help us ... Read More

Creating a Sky shader in React using React-Three-Fiber

Ath Tripathi
Updated on 29-Sep-2021 09:32:17

1K+ Views

In this article, we will see how to create a Sky shader in React JS using React-Three-Fiber. It will appear to look like original sky and it is really a great effect. Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGLExampleFirst install the following packages −npm i --save @react-three/fiber npm i --save @react-three/dreireact-three/fiber will be used as an intermediate between threejs and React.js and drei will be used to implement premade optimizable sky effect in it.Now, insert the following piece of code in App.js ... Read More

Creating animated loading skeletons in React JS

Ath Tripathi
Updated on 29-Sep-2021 09:23:21

260 Views

In this article, we will see how to create animated loading skeletons in React JS. We get to see animated loading skeletons on eCommerce sites and travel sites where they are used to indicate what type of content we are going to see once the page loads. It is popular among developer community. So, let's get started.First create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeExample 1Install the react-loading-skeleton package −npm i --save react-loading-skeletonWe will use this package to implement premade skeleton loading in our React or Node project without any CSS or JavaScript.Add the following ... Read More

SVG morphing in React JS

Ath Tripathi
Updated on 29-Sep-2021 09:15:07

606 Views

SVG morphing is quite useful where you can morph SVG images with a beautiful animation which will look really great. It is a technique to give a transition between two SVG images when one SVG changes to another SVG.First create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeExampleDownload and install the react-svg-morph package −npm install react-svg-morph --saveThis package will allow us to implement premade morphing animation to our SVGs.Add the following lines of code in App.js −import React from "react"; import ReactDOM from "react-dom"; import { MorphReplace } from "react-svg-morph"; class Checked extends React.Component { ... Read More

SVG drawing in React JS frontend

Ath Tripathi
Updated on 29-Sep-2021 09:04:11

980 Views

In this article, we will see how to create an interface on which a user can create drawings, write names, and pretty much any artistic work. You can use this feature to allow users to sign on a page. Here we will use the "react-hooks-svgdrawing" package.First create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeExampleInstall the react-hooks-svgdrawing package −npm i --save react-hooks-svgdrawingThis library will be used to implement the container which will allow us to make a drawing or anything in the form of SVG using mouse or touchpad.Add the following lines of code in App.js ... Read More

SVG zoom-in and zoom-out in React JS

Ath Tripathi
Updated on 29-Sep-2021 08:59:04

1K+ Views

In this article, we will see how to zoom SVG images in React JS. It is really useful in some cases. We will use the react-svg-pan-zoom package to create a feature that will zoom-in or rotate our SVG image.First create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurposeExampleInstall the react-svg-pan-zoom package −npm i --save react-svg-pan-zoomThis package will allow us to implement an area over which we can zoom-in and zoom-out and even rotate an image.Add the following lines of code in App.js −import React, { useRef, useEffect } from "react"; import { UncontrolledReactSVGPanZoom } from "react-svg-panzoom"; ... Read More

Using pointer light for better lighting in React JS with React-Three-Fiber

Ath Tripathi
Updated on 29-Sep-2021 08:52:22

976 Views

In this article, we will see how to use a different type of light in react-three-fiber to make our objects look better. It will mainly act as a torch light that point toward an object. Three.js needs light to show colors, shadow effect, and many different kinds of effects.We will make a cube and then we will add the pointer light to it.ExampleFirst of all, install the following packages −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 ReactNow, insert the following lines ... Read More

Creating a PDF in React JS using plain CSS and HTML

Ath Tripathi
Updated on 29-Sep-2021 08:49:00

819 Views

In this article, we will see how to create a PDF using React JS. PDFs are versatile document formats which are used for various purposes like reporting, data sharing, data storage, etc. It is really a great help if we can a PDF in React through simple CSS.ExampleFirst create a React app −npx create-react-app pdfviewerInstall the react-pdf packagenpm i @react-pdf/renderer We will use this package to create a PDF inside our React frontend using DOM elements and CSS.Insert the following piece of code in in App.js −import React from "react"; import {    Document,    Page,    Text,    View, ... Read More

Advertisements