Simple responsive navigation bar with Tailwind CSS in React
A responsive navigation bar is an important aspect of any website or web application. It helps users to navigate easily and find the information they are looking for. With the...
Category: ReactJS
Best practices for using Tailwind CSS in React projects
Tailwind CSS has become a popular choice among developers for its utility-first approach to CSS. It provides a comprehensive set of pre-defined CSS classes that can be used to quickly...
Getting started with Tailwind CSS in React
Tailwind CSS is a popular CSS framework that allows you to rapidly build custom user interfaces. It offers a wide range of pre-built classes that you can use to style...
How to add Google Maps in React using the package
In this article, you will learn how to add Google Maps in React using the @googlemaps/js-api-loader package. The package allows you to load the Google Maps JavaScript API asynchronously, making...
Draw a line between two points on google maps in React
Drawing a line between two points on Google Maps can be a useful feature in many applications, whether it is to show a route between two locations or to mark...
How to set the document title in React
In a webpage, the <title> element is used to specify the title of a document. The text that is specified within the <title> tags is displayed in the title bar...
Safely setState on a Mounted React Component through the useEffect Hook
In React, when updating the state of a component after it has been unmounted, it can cause a memory leak and lead to unexpected behavior. To avoid this issue, it’s...
How to use React.memo() to not re-render when a new element is added to the component
React.memo() is a higher-order component that can be used to memoize functional components to prevent unnecessary re-renders. When the props of the component being memoized change, React.memo will compare the...
Call an action from another action using Redux Toolkit
There are multiple ways to call an action from another action using Redux Toolkit. Here, we’ll discuss two different methods with a small example. Way to call an action from...
How to export multiple functions from a React hook
In React, we often use hooks to manage stateful logic in our components. Sometimes, we may want to export multiple functions from a single hook, so that they can be...
Truncate text in React using react-lines-ellipsis
In this article, we will show you how to truncate text in React using react-lines-ellipsis. react-lines-ellipsis is an npm package that provides a React component for truncating text and adding...
How to detect a device in React
In order to detect the device in React, you can use the react-device-detect package. react-device-detect is an npm package that provides a simple way to detect the type of device...
Input masking in React
Today, we’ll show you how to input masking in React. The react-text-mask package is a useful tool for formatting and validating user input in a text field, such as phone...
Add a loading animation in React using react-spinners
Today, we’ll show you how to add a loading animation in React using react-spinners. react-spinners is a popular library for adding loading spinners in React applications. It provides a collection...