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

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 ... 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, ... 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 ... Read More

In this article, we are going to build a text editor in React JS, where users can edit their text online. Many websites offer this feature. A text editor is used to edit plain text files. Text editors differ from Word processors, such as Microsoft Word or WordPerfect, in that ... Read More

In this article, we are going to create a React app which will show a map without any third-party API. You can edit the map's width and height, add markers to it, and do many more amazing things. We will use the pigeon-maps package to create the map. So, let's ... Read More

In this article, we will see how to create an Airbnb rheostat. Rheostat is a www, mobile, and accessible slider component built with React. Rheostat is a scrollbar where you can slide the pointer to select some values or decide a range of values.ExampleFirst create a React project −npx create-react-app ... Read More

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 ... 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 ... 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 ... Read More