Ath Tripathi has Published 78 Answers

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

Ath Tripathi
Published on 29-Sep-2021 09:45:39
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 ... Read More

Creating a QR Code of a link in React JS

Ath Tripathi
Published on 29-Sep-2021 09:37:24
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, ... Read More

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

Ath Tripathi
Published on 29-Sep-2021 09:25:22
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 ... Read More

Creating animated loading skeletons in React JS

Ath Tripathi
Published on 29-Sep-2021 09:17:05
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 ... Read More

SVG morphing in React JS

Ath Tripathi
Published on 29-Sep-2021 09:06:19
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 ... Read More

SVG drawing in React JS frontend

Ath Tripathi
Published on 29-Sep-2021 09:01:04
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 ... Read More

SVG zoom-in and zoom-out in React JS

Ath Tripathi
Published on 29-Sep-2021 08:57:27
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 ... Read More

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

Ath Tripathi
Published on 29-Sep-2021 08:50:51
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 ... Read More

Creating a PDF in React JS using plain CSS and HTML

Ath Tripathi
Published on 29-Sep-2021 08:49:00
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 ... Read More

Device Detection and Responsive Design in React JS

Ath Tripathi
Published on 29-Sep-2021 08:42:43
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 ... Read More
1 2 3 4 5 6 7 8 Next
Advertisements