Found 217 Articles for Javascript Library

Image slider is crucial in any web application to show multiple images with good UX. Whenever we go on any prestigious site like amazon.com or cardekho.com, they show images in the slider, and these websites need to show multiple images for every product. Now, what if they show every single image without a slider, users can’t see the image properly, and it looks worst. So, in this tutorial, we will learn various approaches to creating an image slider in ReactJS. Use the react-simple-image-slider Npm package The react-simple-image-slider allows us to create an image slider in ReactJS. Users ... Read More

We can choose from various libraries like request, axios, or fetch to make requests to our HTTP REST API endpoint. Doing so allows us to interact with data from our API and display it in our ElectronJS application. ElectronJS is an open-source project actively maintained by the OpenJS Foundation and a community of contributors. With ElectronJS, we can build cross-platform desktop applications using web technologies such as HTML, JavaScript, and CSS. In this tutorial, we will learn how to use HTTP REST API calls in our ElectronJS application. Steps to use HTTP REST API calls in ElectronJS ... Read More

The React component can contain various states, and we can use state variables inside the return statement with HTML elements. Whenever the value of state variables updates, it also updates on the web page without refreshing the web page. This tutorial will teach us to use the objects inside the state variable. Whatever value like number, string, Boolean, or object we want to store in the state variable, we need to pass it as a parameter of the useState() hook. Use the objects in the React hooks This section will teach us to use an object as a ... Read More

In ReactJS, we can use the ‘backgroundImage’ property of CSS to set the background image for a component or particular HTML element like div. Here, we will learn to set the background image using the inline styles. Also, we will use the absolute and relative URLs to set the background image. Syntax Users can follow the syntax below to use the React inline styles to set the background image. Div content In the above syntax, we have used the ‘backgroundImage’ CSS property to set the background image for the div element. ... Read More

Material-UI is a popular React-based UI library that provides a wide2 range of UI components and design elements. Next.js is a React-based framework for building server-side rendered (SSR) and statically exported web applications. In this tutorial, we will learn how to use Material-UI with Next.js to create a user-friendly, modern and responsive user interface. Steps to integrate Material-UI with Next.js Users can follow the steps below to use Material-UI with NextJS. Step 1 − Start by creating a new Next.js project using the following command − npx create-next-app my-app Step 2 − Navigate to the newly created project ... Read More

Flexbox is a one-dimensional layout system used in React Native for arranging and aligning items in rows or columns, similar to how it's used in CSS on the web, but with some default differences. It is designed to help us create layouts that look good on different screen sizes. Using flexbox in React Native is like arranging objects on a shelf by placing books, pictures, and other items in different positions and orientations. This allows us to create responsive, flexible layouts that adapt to different screen sizes and orientations. In this tutorial, we will go through the basics of ... Read More

"Process out of Memory" is an error that occurs when a Node.js program tries to use more memory than the system has available. This can happen when the program grows too big or runs for too long and can cause the system to stop working properly. To prevent this error, we may need to limit the amount of memory our program uses or find ways to optimize its performance. In this tutorial, we will learn about the "Process out of Memory Exception" in Node.js, what causes it to occur, and how to solve it. We will also explore some ... Read More

Emojis have become an essential part of modern communication. In this tutorial, we will learn how to create an emoji picker in NextJS, a popular React-based framework for building server-rendered applications An emoji picker is a UI component that displays a collection of emojis and allows users to select one or more emojis for use in their text. A well-designed emoji picker can improve the user experience and increase engagement on your site. In this tutorial, we will create an emoji picker that displays a grid of emojis and updates the selected emoji in the state. Steps to create ... Read More

The linear progress bar is often used to show download and upload percentages in the application. We can show the upload or downloaded completion percentage using the linear progress bar. Also, it improves the UX of the application as it shows progress with animation. In this tutorial, we will learn to show linear progress using the Material UI progress bar and custom progress bar. Use the Material UI to show the LinearProgress bar in ReactJS Users can use the below command in the React application to install the Material UI library. npm install @mui/material @emotion/react @emotion/styled ... Read More

The handleChange() is not a built-in function in the React, but as its name suggests, we can define it to handle changes that users made in the input. In the react, we need to handle the input whenever a user enters some value in the input field to make it editable. Here, we will learn to use the handleChange() function with single and multiple inputs. Use the handleChange() function with functional components In react, we can define the components using the function keyword and call them functional components. We can use hooks to manage the input value while using the ... Read More