Found 217 Articles for Javascript Library

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 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

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

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

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

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

In this article, we will see how to render a page according to device but without using if-else clause. For this, we will use the react-device-detect package. This feature can help us create responsive webpages without using any media queries. So, let's get started.ExampleFirst create a React project −npx create-react-app tutorialpurposeGo to the project directory −cd tutorialpurpose Download the react-device-detect package −npm install react-device-detect --saveWe will use this package to add default media queries or default conditional rendering which are premade inside the package.Add the following lines of code in App.js −import { BrowserView, ... Read More

In this article, we will see how to make a metallic texture cubic box in React JS using React-Three-Fiber package. First, we will download a metallic photo and then we will apply it over all the surfaces of a cube. Cubes are basic shapes but we can make them look attractive by wrapping an image over its surfaces. So, let's get start.ExampleFirst download and 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 React.Now let's download a metallic image ... Read More

Drag and Drop interfaces enable web applications to allow users to drag and drop files on a web page. In this article, we will see how an application can accept one or more files that are dragged from the underlying platform's file manager and dropped on a web page. Here, we will be using the react-dropzone package. Let's get started.ExampleFirst of all, create a React project −npx create-react-app newprojectGo to the project directory −cd newproject Now download and install the react-dropzone package −npm i --save react-dropzoneWe will use this library to add a droppable area inside our React element's area. ... Read More

In this article, we will see how to draw flowchart-like arrows to connect different DOM elements in React JS. You can use this feature to create a unique web design. Here we will use the react-archer package to draw arrows to connect the DOM elements.A DOM element is something like a DIV, HTML, BODY element on a page. You can add classes to all of these using CSS, or interact with them using JS.ExampleFirst create a React project −npx create-react-app tutorialpurposeNow go to the project directory −cd tutorialpurposeDownload and install the react-archer package −npm install react-archerWe will use the react-archer ... Read More