React

React-Timeago Example : Show Elapsed Time in Sec, Min, Day, Months Years etc

by

Displaying time elapsed since a certain date is a common requirement in many web applications. “React-timeago” is a popular package that makes it easy to display the time elapsed in a user-friendly way. This package automatically updates the display as time passes, and also provides various customization options such as language and time units to display.

In this tutorial, you will learn how to use the “react-timeago” package in a React project, how to customize the output, and see various examples of how it can be used.

Read more

React : How to Create Services and Consume in Components with Examples

by

Services in React are used to manage state and perform side-effects outside of the component lifecycle. They are essential for breaking down complex logic into separate, reusable components that can be shared across different parts of the application. There are two types of services in React – singleton and non-singleton.

Singleton services are services that have only one instance throughout the lifetime of the application. This means that whenever the service is invoked, it uses the same instance and data. An example of a singleton service in a React application could be an authentication service that manages the state of the current user.

Read more

React Virtualized Select: A powerful and flexible dropdown component

by

React Virtualized Select is a versatile dropdown component for React apps that’s powerful, fast, and easy to use. It simplifies the creation of scrolling select lists that load quickly and smoothly even when they contain thousands of options. The component provides several essential features, including:

  • React Virtualized Select renders only the visible options, making it lightweight and fast. Even when the select list contains large numbers of options, the component renders quickly.
  • Developers can customize the component’s look and feel to match their app. React Virtualized Select offers a wide range of customization options.
  • React Virtualized Select is designed to be fully accessible for users with disabilities.
  • Users can quickly search and filter through long lists of options, making it easy to find what they need.

Read more

Creating a Inter Draggable Lists with React Beautiful DnD

by

React Beautiful DnD (Drag and Drop) is a powerful and flexible library that allows developers to add draggable and droppable elements to their React applications. It is built on top of the popular react-dnd library and provides a set of higher-order components that can be used to create draggable and droppable lists, boards, and other interactive elements.

Read more

React-Select: Learn to Use Multiple Select, Filter, and Server-Side Options

by

React-select is a popular library for creating custom select elements in React applications. It offers a wide range of features and customization options, making it a great choice for building advanced select elements. With React-select, developers can easily create and customize select elements with a simple and intuitive API. In this tutorial, we will go over how to use React-select in a React application, including examples of how to customize the library to fit your specific use case.

Read more

React 18 : Server-side Table Pagination with React-Bootstrap

by

In this tutorial, we will be discussing how to create a fully functional pagination system using React.js. Pagination is a crucial aspect of any application that deals with a large amount of data, as it allows users to navigate through and access the information they need easily. Our pagination system will include features such as the ability to navigate to specific pages and first, last, next, and previous buttons for easy navigation. Additionally, we will also be implementing a server-side pagination system to fetch only the current page’s data from the server, rather than loading all data at once.

Read more

React : Create and Validate Forms with Formik, Yup & Bootstrap

by

Form handling is a common task in web development and Formik is a popular library for handling forms in React. React Bootstrap is a library that allows you to use Bootstrap components in React. In this tutorial, we will create a sample student form using Formik and Yup in a separate functional component and demonstrate how to get the form values on submit and show them on the parent App component. Additionally, we will use React Bootstrap for styling the form and also add a reset button and error handling messages for each field.

Read more

Using SASS in React JS Application

by

In this tutorial, we will go through easy steps to start using SASS instead of traditional CSS in React JS application.

Syntactically Awesome Style or SASS is the CSS with superpowers. SASS provides a wide variety of easy methods and techniques to develop modern-era web applications. It helps in robust and powerful management of CSS code which proves more efficient and easy to maintain.

Read more

How to Include bootstrap css in React app?

by

You can easily use/ include bootstrap css in your React js app, by following these quick steps:

Step 1  – Open your React app’s terminal and navigate to the project directory.

Step 2  – Install Bootstrap using npm by running the following command:

Read more

React StepZilla – Stepper Form with Validation Example Application

by

In this tutorial, we will discuss how to create a stepper-based form in React application using the react-stepzilla library and implement validation and manual step change method by using its jumpToStep functoin.

React-Stepzilla is a library that enables you to create multi-step forms easily in React. It simplifies building complex forms by providing an intuitive way to break the layout into several smaller steps. In this tutorial, we will be exploring how to use React-Stepzilla to buid a multi-step form.

Read more

Track IP Address of Client using WebRTC in React App

by

In this tutorial, we will discuss how we can use the WebRTC to get IP address on UI app in React app.

WebRTC (Web Real-Time Communication) is a powerful technology that enables real-time communication and data transfer between web browsers without the need for plugins or third-party softwar. One of the lesser-known capabilities of WebRTC is its ability to retrieve the client’s IP address from within a React application.

Read more

How to Get Client IP Address in React App?

by

In this tutorial, you will get to know how to get a user client-side IP address from React application using the third-part service to fetch IP address.

IP addresses are unique identifiers that are used to identify devices connected to a network. Obtaining the IP address of a client is an important task in web development, as it alows developers to provide location-based services or personalize content for the user.

Read more