DEV Community: Kunal Ukey

How to Use Patch-Package to Fix Broken Node Modules Instantly! 🚀🔗

Kunal Ukey — Mon, 03 Mar 2025 11:15:07 +0000

When working with third-party NPM packages, you may find bugs, missing features, or specific needs that require modifying the package code. Instead of waiting for the package maintainers to merge a pull request (which can take weeks or months), you can directly modify the package in your node_modules and make your changes persist using patch-package.

In this blog, we'll go through the steps to modify an NPM package, create a patch, and ensure the changes are applied even after reinstalling dependencies.

Why Modify an NPM Package?

Fix Bugs: If a package has a bug that affects your project, you don't have to wait for the maintainer to fix it.
Add Features: Sometimes, packages lack features you need, and modifying them is quicker than waiting for an official update.
Avoid Forking: Instead of forking and maintaining a separate package, you can patch the existing one directly.
No Need for PR Approval: Pull requests can take weeks or months to get merged. With patch-package, you can apply changes immediately.

Step 1: Install patch-package

First, install patch-package as a development dependency:

npm install patch-package postinstall-postinstall --save-dev

Also, add a postinstall script in your package.json to ensure patches are reapplied after installing dependencies:

"scripts": {
  "postinstall": "patch-package"
}

Step 2: Modify the Package Code

Locate the package inside node_modules and make the necessary changes. For example, if you're modifying @kunalukey/react-image, edit the file:

node_modules/@kunalukey/react-image/main/LazyImage.js

import React, { useEffect, useRef, useState } from "react";
const LazyImage = ({
  placeholderSrc,
  placeholderClassName,
  placeholderStyle,
  src,
  alt,
  className,
  style
}) => {
  const [isLoading, setIsLoading] = useState(true);
  const [isPlaceholder, setIsPlaceholder] = useState(false);
  const [view, setView] = useState("");
  const placeholderRef = useRef();
  const imageRef = useRef();
  useEffect(() => {
    if (document.readyState === "complete") {
      const observer = new IntersectionObserver(entries => {
        if (entries[0].isIntersecting) {
          setView(src);
          observer.unobserve(placeholderRef.current);
        }
      });
      if (placeholderRef && placeholderRef.current && isPlaceholder) {
        observer.observe(placeholderRef.current);
      }
    }
  }, [src, isPlaceholder]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading && /*#__PURE__*/React.createElement("img", {
    src: placeholderSrc,
    alt: "",
    className: placeholderClassName,
    style: placeholderStyle,
    ref: placeholderRef,
    onLoad: () => setIsPlaceholder(true)
  }), /*#__PURE__*/React.createElement("img", {
    src: view,
    alt: alt,
    className: className,
    onLoad: () => setIsLoading(false),
    style: isLoading ? {
      display: "none"
    } : style,
    ref: imageRef
  }));
};
export default LazyImage;

import React, { useEffect, useRef, useState } from "react";
import defaultPlaceholder from "./path-to-svg-file"; // import placeholder file

const LazyImage = ({
  placeholderSrc = defaultPlaceholder, // default placeholder
  placeholderClassName,
  placeholderStyle,
  src,
  alt,
  className,
  style
}) => {
  const [isLoading, setIsLoading] = useState(true);
  const [isPlaceholder, setIsPlaceholder] = useState(false);
  const [view, setView] = useState("");
  const placeholderRef = useRef();
  const imageRef = useRef();
  useEffect(() => {
    if (document.readyState === "complete") {
      const observer = new IntersectionObserver(entries => {
        if (entries[0].isIntersecting) {
          setView(src);
          observer.unobserve(placeholderRef.current);
        }
      });
      if (placeholderRef && placeholderRef.current && isPlaceholder) {
        observer.observe(placeholderRef.current);
      }
    }
  }, [src, isPlaceholder]);
  return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading && /*#__PURE__*/React.createElement("img", {
    src: placeholderSrc,
    alt: "",
    className: placeholderClassName,
    style: placeholderStyle,
    ref: placeholderRef,
    onLoad: () => setIsPlaceholder(true)
  }), /*#__PURE__*/React.createElement("img", {
    src: view,
    alt: alt,
    className: className,
    onLoad: () => setIsLoading(false),
    style: isLoading ? {
      display: "none"
    } : style,
    ref: imageRef
  }));
};
export default LazyImage;

Step 3: Create a Patch File

Once you've made your changes, run the following command to create a patch:

npx patch-package @kunalukey/react-image

This will generate a patch file inside a patches/ directory:

The patch file contains a diff of the changes you made.

Step 4: Handle Binary Files (SVG, GIF, etc.)

patch-package works best on text-based files like .svg and may not work perfectly on .gif or .mp4 files.

Step 5: Apply Patches After Installing Packages

The postinstall script will automatically apply patches whenever you run npm install. If needed, you can manually reapply them with:

npx patch-package name-of-package

Conclusion:

Using patch-package, you can quickly fix bugs, add features, and modify NPM packages without waiting for upstream changes. This is a powerful tool for improving your workflow while keeping your project up-to-date with third-party dependencies.

PS - I am open for freelance work or a remote job 🤓.
Contact me: kunalukey32@gmail.com

How To Add Dark Mode Toggle in ReactJS + TailwindCSS + DaisyUI ⚛️🌼

Kunal Ukey — Wed, 26 Apr 2023 18:31:47 +0000

Introduction:

In this tutorial, we will learn how to add a dark mode toggle with local storage persistence to a ReactJS + TailwindCSS + DaisyUI project. We will begin by setting up the project and installing the necessary dependencies. Next, we will create a Navbar and Hero component using DaisyUI's pre-built components. Finally, we will implement a dark mode toggle using DaisyUI's help and by updating the custom attribute in the HTML tag to add local storage persistence to it.

Prerequisites:

Before we get started, you need to have the following tools and technologies installed on your machine:

NodeJS
Code Editor

Initiate ReactJS project

Let's start by creating a new Reactjs project using the create-react-app command.

npx create-react-app dark-mode-toggle
cd dark-mode-toggle

Then remove the unnecessary files and code from the src directory.

Installing and Configuring TailwindCSS

To install TailwindCSS, run the following command:

npm install -D tailwindcss

Then create a new file called tailwind.config.js by running the following command:

npx tailwindcss init

In the tailwind.config.js file, add the following code to it:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

  theme: {
    extend: {},
  },
  plugins: [],
}

In your src/index.css file, add the following directives:

@tailwind base;
@tailwind components;
@tailwind utilities;

Installing and Configuring DaisyUI

Now that we've set up TailwindCSS, let's install DaisyUI. DaisyUI is a collection of ready-to-use UI components designed to work seamlessly with TailwindCSS.

To install DaisyUI, run the following command in your project directory:

npm install daisyui

After the installation is complete, we need to configure DaisyUI with TailwindCSS.

Open the tailwind.config.js file and add the following code at the end of the plugins array:

plugins: [require('daisyui')],

Now we also need to add the daisyUI themes so that we can switch between them.

  daisyui: {
    themes: ["light", "dark"],
  },

The whole code in our tailwind.config.js file would look something like this:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],

  theme: {
    extend: {},
  },
  plugins: [require("daisyui")],
  daisyui: {
    themes: ["light", "dark"],
  },
}

Navbar component

Now create an Navbar.js file inside the src/components folder and add the following code to it:

import { useState, useEffect } from "react";

// assets
import logo from "../assets/om-logo.png";
import sun from "../assets/sun.svg";
import moon from "../assets/moon.svg";

const Navbar = () => {
  return (
    <div className="navbar bg-base-100 shadow-lg px-4 sm:px-8">
      <div className="flex-1">
        <img src={logo} alt="OM" className="btn btn-ghost p-0" />
        <h1 className="text-lg font-bold mx-4">Your Website</h1>
      </div>
      <div className="flex-none">
        {/* Toggle button here */}
        <button className="btn btn-square btn-ghost">
          <label className="swap swap-rotate w-12 h-12">
            <input type="checkbox" />
            {/* light theme sun image */}
            <img src={sun} alt="light" className="w-8 h-8 swap-on" />
            {/* dark theme moon image */}
            <img src={moon} alt="dark" className="w-8 h-8 swap-off" />
          </label>
        </button>
      </div>
    </div>
  );
};
export default Navbar;

Hero component (Optional)

To add some content to our single page, let's create another component called Hero.js inside the src/components folder and add the following code it:


const Hero = () => {
  return (
    <div className="hero min-h-full h-full pt-[20%]">
      <div className="hero-content text-center">
        <div className="max-w-md">
          <h1 className="text-5xl font-bold">Your Awesome Website!</h1>
          <p className="py-6">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.
          </p>
          <button className="btn btn-primary">
            Checkout
          </button>
        </div>
      </div>
    </div>
  );
};
export default Hero;

Adding Navbar and Hero components to App.js

Now we are ready to show our components in our single page by adding them to the App.js component as:

import Navbar from "./components/Navbar";
import Hero from "./components/Hero";

function App() {
  return (
    <div className="h-full min-h-full">
      <Navbar />
      <Hero />
    </div>
  );
}

export default App;

Implementing Dark Mode Toggle functionality

Towards the end, we have to toggle the dark/theme when we click on the toggle button from the Navbar component. So, add the following code to the Navbar.js component:

import { useState, useEffect } from "react";

// assets
import logo from "../assets/om-logo.png";
import sun from "../assets/sun.svg";
import moon from "../assets/moon.svg";

const Navbar = () => {
  // use theme from local storage if available or set light theme
  const [theme, setTheme] = useState(
    localStorage.getItem("theme") ? localStorage.getItem("theme") : "light"
  );

  // update state on toggle
  const handleToggle = (e) => {
    if (e.target.checked) {
      setTheme("dark");
    } else {
      setTheme("light");
    }
  };

  // set theme state in localstorage on mount & also update localstorage on state change
  useEffect(() => {
    localStorage.setItem("theme", theme);
    const localTheme = localStorage.getItem("theme");
    // add custom data-theme attribute to html tag required to update theme using DaisyUI
    document.querySelector("html").setAttribute("data-theme", localTheme);
  }, [theme]);

  return (
    <div className="navbar bg-base-100 shadow-lg px-4 sm:px-8">
      <div className="flex-1">
        <img src={logo} alt="OM" className="btn btn-ghost p-0" />
        <h1 className="text-lg font-bold mx-4">Your Website</h1>
      </div>
      <div className="flex-none">
        {/* Toggle button here */}
        <button className="btn btn-square btn-ghost">
          <label className="swap swap-rotate w-12 h-12">
            <input
              type="checkbox"
              onChange={handleToggle}
              // show toggle image based on localstorage theme
              checked={theme === "light" ? false : true}
            />
            {/* light theme sun image */}
            <img src={sun} alt="light" className="w-8 h-8 swap-on" />
            {/* dark theme moon image */}
            <img src={moon} alt="dark" className="w-8 h-8 swap-off" />
          </label>
        </button>
      </div>
    </div>
  );
};
export default Navbar;

Conclusion:

Congratulations! You've successfully added a dark mode toggle to your ReactJS application using Tailwind CSS and daisyUI. Now your users can enjoy the flexibility of choosing their preferred theme for a better user experience.

Thanks for following along, and happy coding!❤️

How to Create your Own useWindowSize Hook in ReactJS

Kunal Ukey — Sat, 01 Apr 2023 07:43:00 +0000

Introduction:

As a ReactJS developer, you may encounter situations where you need to dynamically show or hide a component or element based on the browser's window dimensions. Normally, CSS Media Queries are used for this purpose, but if you are using ReactJS, you can also use the useWindowSize hook to dynamically render a component or element. Therefore, in this tutorial, I will guide you through the process of creating your custom useWindowSize hook.

Approach:

We will conditionally render the div named medium when the screen width is greater than 750px, and we will also render the div named large when the screen width is greater than 1024px.

App.js

// global stylesheet
import "./styles.css";

export default function App() {
  return (
    <div className="container">
      <div className="box">Small</div>
      <div className="box">Medium</div>
      <div className="box">Large</div>
    </div>
  );
}

In the above App.js component, we have a parent div with the class container and three child elements with the class box.

styles.css

.container {
  display: flex;
  justify-content: center;
  gap: 2rem;
}

.box {
  background-color: coral;
  padding: 2rem;
  color: white;
  font-weight: bold;
  border-radius: 1rem;
}

We added some styles to the "container" class and "box" class in the global stylesheet to improve their appearance.

useWindowSize Hook

It's time to create our useWindowSize hook. To do so, navigate to the src folder, and if you haven't already, create a hooks folder within it. Next, create a file named useWindowSize.js.

useWindowSize.js

import { useState, useEffect } from "react";

function useWindowSize() {
  // Initial screen width and height
  const [screenWidth, setScreenWidth] = useState(window.innerWidth);
  const [screenHeight, setScreenHeight] = useState(window.innerHeight);

  // Will run after mount
  useEffect(() => {
    // function to update screenWidth & screenHeight states
    function handleResize() {
      setScreenWidth(window.innerWidth);
      setScreenHeight(window.innerHeight);
    }

    // listen to resize event and update states
    window.addEventListener("resize", handleResize);

    // cleanup function to safely remove eventListener
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return { screenWidth, screenHeight };
}

export default useWindowSize;

We've initialized the screenWidth and screenHeight states with the height and width of the browser viewport. Within the useEffect hook, we've defined a function named handleResize, which updates the screenWidth and screenHeight states whenever the user resizes the browser window. To enable this functionality, we've added an event listener that listens to the resize event and calls the handleResize function to update the states accordingly. Finally, we've implemented a cleanup function that safely removes the event listener.

Using useWindowSize Hook

Now that our useWindowSize hook is ready to use, let's import it into the App.js component and use it to conditionally render the medium and large named divs.

App.js

// global stylesheet
import "./styles.css";

// hook
import useWindowSize from "./hooks/useWindowSize";

export default function App() {
  // Using screenWidth state from useWindowSize hook
  const { screenWidth } = useWindowSize();

  return (
    <div className="container">
      <div className="box">Small</div>

      {/* Conditionally showing Medium named div */}
      {screenWidth > 750 ? <div className="box">Medium</div> : null}

      {/* Conditionally showing Large named div */}
      {screenWidth > 1024 ? <div className="box">Large</div> : null}
    </div>
  );
}

I hope this has been helpful and informative for you. If you have any questions, comments, or feedback, feel free to leave a comment below! Happy coding! ❤

How to Setup and Deploy a MERN stack project for FREE 🌐🚀

Kunal Ukey — Sun, 19 Mar 2023 14:52:52 +0000

Introduction:

If you're a developer who's just starting out with the MERN stack, you may be wondering how to deploy your project for the world to see. Luckily, there are free options out there, and in this article, we'll walk you through the process of setting up and deploying a MERN stack project using Render.com

Now, let's get started with setting up our MERN stack project!

Root Folder

The first step is to create a root folder for the project, you can name the folder anything you want, I will name the root folder mern-deploy.

Setting-up Backend

Open any code editor inside the root folder (I am using VS Code), and then create a folder named backend. After this, Open the terminal by pressing CTRL + ` If you are on windows. I don't know about MacOS 😅.
Run this command:



cd backend

Now you will be inside the backend folder.
Run this command to install all the required dependencies.



npm install express mongoose dotenv cors

Create a file named .env to store all your secret keys.
Our .env file should look something like this:



MONGODB_URI=YOUR_MONGODB_URI
PORT=4000

Now, create a file named app.js, and write some code inside it.

app.js



const express = require("express");
const mongoose = require("mongoose");
const app = express();
const cors = require("cors");
require("dotenv").config();

// middleware
const corsOptions = {
    origin: "http://localhost:3000" // frontend URI (ReactJS)
}
app.use(express.json());
app.use(cors(corsOptions));

// connect MongoDB
mongoose.connect(process.env.MONGODB_URI).then(() => {
    const PORT = process.env.PORT || 8000
    app.listen(PORT, () => {
        console.log(`App is Listening on PORT ${PORT}`);
    })
}).catch(err => {
    console.log(err);
});

// route
app.get("/", (req, res) => {
    res.status(201).json({message: "Connected to Backend!"});
});

Note that you'll need a MongoDB database URI. If you don't already have a MongoDB database, you can create one for free on MongoDB. Once you've created a project and a database, you can generate a database URI and add that URI inside the .env file.

After following these steps, you should have a basic backend server set up with a single home route. In the next step, we'll set up the frontend of our MERN stack project.

Setting-up Frontend

Now, open the terminal and run this command to go back to the root folder.



cd ..

Inside the root folder, run this command to initialze ReactJS boilerplate.



npx create-react-app client

Once this is done, delete all the unnecessary boilerplate files, and inside the App.js file make a fetch request to the backend to show the message.

App.js



import { useEffect, useState } from "react";

function App() {
  const [message, setMessage] = useState("");

  // Fetching message from backend on mount
  useEffect(() => {
    fetch("http://localhost:4000")
      .then((res) => res.json())
      .then((data) => setMessage(data.message));
  }, []);

  return (
    <div className="App">
      <h1>{message}</h1>
    </div>
  );
}

export default App;

Deleting .git folder inside client

Delete the .git folder inside the client folder to prevent any conflicts during the deployment process. I would recommend you to delete it manually using the file manager. Also delete the .gitignore file.

Setting-up Root folder for Deployment

Now we have everything set for backend and frontend, let's create package.json file for the root folder by running this following command:



npm init -y

It will generate a package.json file with default fields.

package.json



{
  "name": "mern-deploy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Now we need to have .gitignore file, so that when we push our code to github all the mentioned files & folders inside will be ignored. So, create a .gitignore file and add all these.

.gitignore



# dependencies
node_modules
.pnp
.pnp.js

# testing
coverage

# production
build

# misc
.env
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local

npm-debug.log*
yarn-debug.log*
yarn-error.log*

Now, we need to add some scripts to our package.json file to help us start our project and build it for deployment. Add the following scripts to your root folder's package.json file:



{
  "name": "mern-deploy",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "install-server": "cd backend && npm install",
    "start-server": "cd backend && node app.js",
    "install-client": "cd client && npm install",
    "build-client": "cd client && npm run build",
    "start-client": "cd client && npm run start"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

These scripts allow us to install our server and client dependencies, start our server and client separately, and build our client for deployment.

Creating GitHub Repository

After adding the necessary scripts to your package.json file, the next important step is to host your code on a version control platform like GitHub.
So, create a new repository on github.com and then follow this steps on your terminal:

Add all the files to the staging area using the command git add .
Commit the changes using the command git commit -m "initial commit"
Add your GitHub repository as a remote using the command git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPOSITORY_NAME.git. Make sure to replace "YOUR_USERNAME" and "YOUR_REPOSITORY_NAME" with your actual GitHub username and repository name.
Rename master branch to main branch using git branch -M main
Push your code to the repository using the command git push -u origin main.

Deploy to Render.com

Now that your project is hosted on GitHub, you can deploy it to Render.com. Here's how to do it:

Create an account on Render.com if you haven't already.
Link your GitHub account to give access to your repository.
Click on "New" and select "Web Service" from the option.

Select your repository, and in the next screen, fill the fields as shown below:

Name: YOUR_DESIRED_NAME
Runtime: Node
Build Command: npm run install-server
Start Command: npm run start-server

Open Advanced option, and add environment variables.

Click on "Create Web Service" to deploy your backend.

Add Backend URL to Frontend

Once the backend is successfully deployed, copy its URL and add it to the client/App.js file.

App.js



import { useEffect, useState } from "react";

function App() {
  const [message, setMessage] = useState("");

  useEffect(() => {
    fetch("https://YOUR_BACKEND_URL.com")
      .then((res) => res.json())
      .then((data) => setMessage(data.message));
  },[]);

  return (
  <div className="App">
    <h1>{message}</h1>
  </div>
  );
}

export default App;

Again, stage and commit the changes to GitHub.

Deploy Frontend

Now the backend is ready, its time to deploy our frontend to render.com
Here's how to do it:

Click on "New" and select "Static Site" from the option.
Select your repository, and in the next screen, fill the fields as shown below:

Name: YOUR_DESIRED_NAME
Runtime: Node
Build Command: npm run install-client && npm run build-client
Publish directory: ./client/build

Click "Create Static Site" to deploy your frontend.

Add Frontend URL to Backend

Once the frontend is successfully deployed, copy its URL and add it to the backend/app.js file.

app.js



const express = require("express");
const mongoose = require("mongoose");
const app = express();
const cors = require("cors");
require("dotenv").config();

// middleware
const corsOptions = {
    origin: "YOUR_FRONTEND_URL", // frontend URI (ReactJS)
}
app.use(express.json());
app.use(cors(corsOptions));

// connect MongoDB
mongoose.connect(process.env.MONGODB_URI).then(() => {
    const PORT = process.env.PORT || 8000
    app.listen(PORT, () => {
        console.log(`App is Listening on PORT ${PORT}`);
    })
}).catch(err => {
    console.log(err);
});

// route
app.get("/", (req, res) => {
    res.status(201).json({message: "Connected to Backend!"});
});

Again, stage and commit the changes to GitHub.

And that's it! Your MERN stack project should now be up and running on Render.com

Thanks for Reading! ❤

Why you should use TailwindCSS in your ReactJS project

Kunal Ukey — Sun, 26 Feb 2023 17:58:48 +0000

Hey everyone, Today, we're going to be talking about Tailwind CSS, a popular utility-first CSS framework, and why you should use it in your ReactJS project. Let's dive in!

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework(utility first means single class defining single CSS property in most cases), So tailwindcss provides a set of pre-built CSS classes that you can use to style your HTML elements. Meaning that you don't have to write repetitive CSS for different elements that will of course reduce your CSS bundle size. The framework is designed to be highly customizable, allowing you to create unique designs quickly and easily.

Why is Tailwind CSS better than its competitors?

Tailwind CSS is better than its competitors in several ways. For starters, it's highly customizable, which means you can create unique designs quickly and easily. It also has a smaller learning curve compared to other CSS frameworks like bootstrap, making it more accessible to developers of all levels. It also the most popular CSS framework right now!

How to install Tailwind CSS in your ReactJS project?

To install Tailwind CSS in your ReactJS project, you can use a package manager like npm. You can install it by running the following command:

npm install tailwindcss

If you check the TailwindCSS official create-react-app installation guide, you’ll know that postCSS is not supported, and we have to select other options like vite, nextjs or remix. Before that, what’s actually postCSS is?, PostCSS is a JavaScript tool that transforms your CSS code into an abstract syntax tree (AST) using Javascript plugins, Inshort it is a tool that supports number of different plugins to transform your CSS on the go, and Autoprefixer is a postCSS plugin that will add vendor prefixes to the newly CSS properties so that your CSS styles also supports the older browsers and this gives you the freedom to try latest CSS features along with supporting the older browsers. It is partially supported in Create React App, so if you want to take the advantage of this feature, then you should switch to options like Vite for React, NextJS or Remix.
To try it use:

npm install postcss autoprefixer

and add it to your postcss.config.js config file:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}

After installing TailwindCSS, you need to create a Tailwind config file by running the following command:

npx tailwindcss init

This will create a default configuration file that you can modify to fit your project's needs.

What is the Tailwind config file?

The Tailwind config file is a file that contains all the configuration options for your Tailwind CSS framework. In this file, you can customize things like the colors, fonts, and sizes of your elements, you can also add TailwindCSS plugins and much more. Think it as a brain of the tailwindCSS in your project much like a package.json file which contains all the working brain of your project like running scripts, dependencies and all which you already must be familiar with.

In your tailwind.config.js file, you can add a path to all files that will be using tailwindCSS in the content array:

/** @type {import('tailwindcss').Config} */
module.exports = {
  /* files that will be using tailwindcss */
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Before moving further, make sure to install this TailwindCSS intellisense extension, this will help you write tailwindCSS much faster with live suggestions.
After that, paste this three directives in the index.css file (global css file) so that it can have access globally in your project.

@tailwind base;
@tailwind components;
@tailwind utilities;

What are Tailwind base, components, and utilities directives?

Tailwind base, components, and utilities directives are the three different types of directives that you can use in your CSS code. Base directive apply to the entire document and helps you to remove browser default styling (remember we use to write margin, padding, box-sizing to all the elements) which is a best practice of course for consistent styling purpose, TailwindCSS helps us to do that using this base directive. so if we build the project by adding this directive you will see some prestyles will be added to your CSS production code base which is fine because it is only 1kb in size, components classes apply to specific components, and utilities classes apply specific styles to individual elements which we will be using.

What is Tailwind JIT, and how does it work in the newer Tailwind version?

Tailwind JIT is a new feature that was introduced in the newer Tailwind version (v2.1). It stands for "Just-In-Time" and allows you to generate CSS on-demand, which can significantly reduce the file size. It works by analyzing your HTML and generating CSS only for the classes that are used. Previously all the TailwindCSS styles were used at the development time, turning it huge CSS file sizes of 10-15mb.

With the version 2.1 it was introduced and given the option to add in the config file. but with version 3.0 it was pre-enabled and comes out of the box.

How does Tailwind reduce CSS size, and how it reduces it in the newer version?

The newer version of Tailwind uses the JIT feature, which generates CSS on-demand, further reducing the file size. Previously we have to use PurgeCSS for removing the unused CSS styles in production build, but with the newer TailwindCSS version it also comes pre-enabled right out of the box.

How to write cleaner Tailwind code?

To write cleaner Tailwind code you can use the @apply directive and separate your code in a new separate place by defining it with a different non-tailwind class.

Before

App.js

<button className="px-4 py-2 m-2 bg-teal-400 rounded-md text-gray-50 font-semibold hover:bg-teal-500">
  Click Me!
</button>

After

index.css

@tailwind base;
@tailwind components;
@tailwind utilities;

.btn {
  @apply px-4 py-2 m-2 bg-teal-400 rounded-md text-gray-50 font-semibold hover:bg-teal-500;
}

App.js

<button className="btn">
  Click Me!
</button>

Apart from this, you can always check the docs of TailwindCSS to learn more, as the docs are very easy to follow even for a beginner.

In conclusion, TailwindCSS is a powerful and popular CSS framework that can help you create unique and beautiful designs quickly and easily. It's highly customizable, has a smaller learning curve, and can significantly reduce your CSS file size. If you haven't already, give it a try in your next ReactJS project!

Thanks for Reading! ❤

Scroll To Top when Route Changes - ReactJS & React Router

Kunal Ukey — Mon, 02 Jan 2023 08:37:14 +0000

Introduction:

Are you looking to implement a feature in your React app that automatically scrolls the user back to the top of the page whenever the route changes? If so, you're in the right place!

In this tutorial, we'll walk through the steps of how to add this functionality to your app. Here's a quick overview of what we'll cover:

Importing the useEffect hook and the useLocation hook from the react-router-dom and react library.
Creating a custom component that utilizes the useEffect and useLocation hooks to scroll to the top of the page whenever the route changes.
Wrapping your app's root component with the BrowserRouter component from the react-router-dom library.
Adding the custom component to the root component of your app.

Let's get started!

Installation

First, make sure that you have the react-router-dom library installed in your project. You can do this by running the following command in your terminal:

npm install react-router-dom

Custom `ScrollToTop` Component

Next, inside the src folder create a folder named components and inside that create a file named ScrollToTop.js. Now, open up the file and import the useEffect hook and the useLocation hook from the react-router-dom library like so:

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

With these hooks imported, we can now create our custom component that will handle the scrolling behavior.

In the same file, define a new function called ScrollToTop like this:

const ScrollToTop = () => {
  // Extracts pathname property(key) from an object
  const { pathname } = useLocation();

  // Automatically scrolls to top whenever pathname changes
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
}

export default ScrollToTop;

This component uses the useEffect hook to add an effect that is run whenever the route changes. The effect simply scrolls the window to the top of the page using the scrollTo method.
So, the complete code inside will look like this:

ScrollToTop.js

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

const ScrollToTop = () => {
  // Extracts pathname property(key) from an object
  const { pathname } = useLocation();

  // Automatically scrolls to top whenever pathname changes
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [pathname]);
}

export default ScrollToTop;

Wrapping Root Component with `BrowserRouter`

Now that we have our custom component defined, we need to make sure that our app is wrapped in the BrowserRouter component from the react-router-dom library. This component provides the useLocation hook with the information it needs to know when the route has changed.

Import the BrowserRouter component like this:

import { BrowserRouter } from 'react-router-dom';

Then, wrap your root component with the BrowserRouter component like this:

index.js


import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode> 
    {/* Wrapping App component inside BrowserRouter component */}  
    <BrowserRouter> 
      <App /> 
    </BrowserRouter>  
  </React.StrictMode> 
);

Finally, add the ScrollToTop component to your root component like this:

App.js

import ScrollToTop from "./components/ScrollToTop";

function App() {

  return (
    <div className="App">
      {/* ScrollToTop component inside App component */} 
      <ScrollToTop />
    </div>
  );
}

export default App;

And that's it! With these changes in place, your app should now automatically scroll to the top of the page whenever the route changes.

I hope this tutorial was helpful in showing you how to implement this feature in your React app. If you have any questions or run into any issues, don't hesitate to ask for help.

Happy coding! ❤

Make Your Own Lazy Loading Image Component In React

Kunal Ukey — Mon, 21 Nov 2022 09:10:22 +0000

Introduction

We all have heard of lazy loading images, and some of you might have used them too.
It is as easy as adding a loading attribute to your image tag. Like below example



<img src="https://image-source.png" alt="image" loading="lazy" />

But, Adding just a loading attribute to your image in React won't work because of client-side rendering.
So how to lazy load images in ReactJS?
Let's see.

Normal Use Case of Images In ReactJS



import { useEffect, useState } from "react";

function App() {
  const [photos, setPhotos] = useState(null);

  useEffect(() => {
    fetch("https://picsum.photos/v2/list")
      .then((res) => res.json())
      .then((data) => setPhotos(data));
  }, []);

  return (
    <div className="App">
      <div className="imageContainer">
        {photos &&
          photos.map((photo) => (
            <img
              key={photo.id}
              src={photo.download_url}
              alt="dummy-img"
              style={{ width: "100%" }}
            />
          ))}
      </div>
    </div>
  );
}

export default App;

Above, I made a simple fetch request, mapped through image data, and rendered it into the browser.

After opening the network tab, you can see the huge amount of data consumed for the images we have yet to see in the viewport.

Solution:

We will use Intersection Observer API provided by the web browsers to monitor which images are in the viewport and which are not. This way, we will only request the images in the viewport 😀.

Let's start by creating a new component called LazyImage.js that will take props and handle all the logic.

Custom Lazy Loading Image Component

LazyImage.js



import { useRef, useState } from "react";

const LazyImage = ({
  placeholderSrc,
  placeholderClassName,
  placeholderStyle,
  src,
  alt,
  className,
  style,
}) => {
  const [isLoading, setIsLoading] = useState(true);
  const placeholderRef = useRef(null);

  return (
    <>
      {isLoading && (
        <img
          src={placeholderSrc}
          alt=""
          className={placeholderClassName}
          style={placeholderStyle}
          ref={placeholderRef}
        />
      )}
      <img
        src={src}
        className={className}
        style={isLoading ? {display: "none"} : style}
        alt={alt}
        onLoad={() => setIsLoading(false)}
      />
    </>
  );
};
export default LazyImage;

Above, we have created a placeholder image that will immediately mount as the isLoading state is true. Then we applied an onLoad function to the actual image that will set the isLoading state to false so the placeholder image will get unmounted. When the isLoading state is true, we have to hide the actual image from showing, So we conditionally styled it by giving it a property of display: "none".

We have created a safe placeholder image to show until the image is completely loaded, which is good, as you can see in the above image.
But, still, all the images are being requested, which we don't want. We only want to request the images that are in the viewport. So now it's time to implement Intersection Observer 😀.

Final Code for Lazy Loading Image Component

LazyImage.js



import { useEffect, useRef, useState } from "react";

const LazyImage = ({
  placeholderSrc,
  placeholderClassName,
  placeholderStyle,
  src,
  alt,
  className,
  style,
}) => {
  const [isLoading, setIsLoading] = useState(true);
  const [view, setView] = useState("");
  const placeholderRef = useRef(null);

  useEffect(() => {
    // Initiating Intersection Observer
    const observer = new IntersectionObserver((entries) => {
      // Set actual image source && unobserve when intersecting
      if (entries[0].isIntersecting) {
        setView(src);
        observer.unobserve(placeholderRef.current);
      }
    });

    // observe for an placeholder image
    if (placeholderRef && placeholderRef.current) {
      observer.observe(placeholderRef.current);
    }
  }, [src]);

  return (
    <>
      {isLoading && (
        <img
          src={placeholderSrc}
          alt=""
          className={placeholderClassName}
          style={placeholderStyle}
          ref={placeholderRef}
        />
      )}
      <img
        src={view} // Gets src only when placeholder intersecting
        className={className}
        style={isLoading ? {display: "none"} : style}
        alt={alt}
        onLoad={() => setIsLoading(false)}
      />
    </>
  );
};
export default LazyImage;

As you can see in the above code, we have initiated the intersection observer inside the useEffect hook, so it will apply only once the component is mounted.
Then we observe the placeholder image to check if it is intersecting (do note that on mount placeholder image will only occupy the space in the DOM.), and once the placeholder is intersecting, we will pass the src we accepted as a prop to the view state we created.
In this way, the actual image will start to make requests 🤩
Ultimately, we will unobserve the placeholder image to stop listening for the changes.

Boom! 🔥
You can see we are only making requests for the images in the viewport.

I have created a package for you to use, so you don't have to make it yourself 😛 Visit HERE
Or run this npm command in your terminal.



npm install @kunalukey/react-image

Video Tutorial:

Thanks for reading! ❤

Multiple Parameters In Redux-Toolkit Query (RTK Query)

Kunal Ukey — Thu, 17 Nov 2022 07:41:32 +0000

RTK Query is a powerful data fetching and caching tool. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.

Problem: Redux-Toolkit Query accepts only one argument to pass, but there are some cases where you want to give multiple arguments. Currently, there has yet to be an official guide on this topic. So, how to pass multiple arguments?

Solution: Pass arguments as object.

Requirements:

Basic React Knowledge
Basic Redux-Toolkit Knowledge

Project Setup

We'll start by installing redux-toolkit & react-redux library, so open a terminal and run the command below.

npm install @reduxjs/toolkit react-redux

Now, Create a folder named redux inside the src folder.
Inside this redux folder, We'll create our api.js & store.js files.

api.js

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

// Generates react hooks for endpoints
export const api = createApi({
    reducerPath: "api",
    baseQuery: fetchBaseQuery({baseUrl: "https://jsonplaceholder.typicode.com/"}),
    endpoints: (builder) => ({
        getUsers: builder.query({
            // Accepts only single argument
            query: (user) => `users/${user}`
        }),
    })
});

// Export endpoints as hooks
export const { useGetUsersQuery } = api;

store.js

import { configureStore } from "@reduxjs/toolkit";
import { api } from "./api";

// Combines multiple states as root state
export const store = configureStore({
    reducer: {
        [api.reducerPath]: api.reducer,
    },
    // getDefaultMiddleware enables important feature like caching.
    middleware: (getDefaultMiddleware) => {
        return getDefaultMiddleware().concat(api.middleware)
    }
});

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from "react-redux";
import { store } from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    // Wrap root component with Provider
    // Provider accepts store (root state) as prop
    <Provider store={store}> 
      <App />
    </Provider>
  </React.StrictMode>
);

In General, Query using single parameter.

App.js

import { useEffect, useState } from "react";
import { useGetUsersQuery } from "./redux/api";

function App() {
  const [userData, setUserData] = useState();
  // You can only pass one argument 🤔
  const { data } = useGetUsersQuery(1);

  useEffect(() => {
    if(data) {
      setUserData([data]);
    }
    console.log(data)
  },[data])

  return (
    <div className="App"> 
      {userData && userData.map(item => (
        <div key={item.id}> 
          <p>{item.name}</p> 
          <p>{item.email}</p> 
        </div> 
      ))} 
    </div> 
  );
}

export default App;

Solution: Pass argument as object.

Previously, we passed the single argument, which is the user number. Now, instead of hardcoding the "users" keyword in the api endpoints, We will use it as an argument along with the user number.
We have to make a slight change inside our api.js file to pass the argument as an object and return an object with a URL property.

api.js

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

// Generates react hooks for endpoints
export const api = createApi({
    reducerPath: "api",
    baseQuery: fetchBaseQuery({baseUrl: "https://jsonplaceholder.typicode.com/"}),
    endpoints: (builder) => ({
        getUsers: builder.query({
            query: (args) => {
                // Destructuring Object
                const { type, userNumber } = args;
                return {
                    // Returns url with multiple args
                    url: `${type}/${userNumber}`
                }
            }
        }),
    })
});

// Export endpoints as hooks
export const { useGetUsersQuery } = api;

Now we can use multiple arguments in our hook 😀. We have to pass it as an object. Let us see an example.

App.js

import { useEffect, useState } from "react";
import { useGetUsersQuery } from "./redux/api";

function App() {
  const [userData, setUserData] = useState();
  // Passing multiple arguments as an object 😀
  const { data } = useGetUsersQuery({type: "users", userNumber: 1});

  useEffect(() => {
    if(data) {
      setUserData([data]);
    }
    console.log(data)
  },[data])

  return (
    <div className="App"> 
      {userData && userData.map(item => (
        <div key={item.id}> 
          <p>{item.name}</p> 
          <p>{item.email}</p> 
        </div> 
      ))} 
    </div> 
  );
}

export default App;

We did it! 😄

Video Tutorial:

Thanks for reading! ♥

Conditional Fetching - Redux-Toolkit Query (RTK Query)

Kunal Ukey — Wed, 16 Nov 2022 11:37:24 +0000

Introduction: RTK Query is a powerful data fetching and caching tool. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.

Problem: Query hooks automatically begin fetching data as soon as the component is mounted. But, there are use cases where you may want to delay fetching data until some condition becomes true.

Solution:

Using skip parameter in a hook
Using Lazy Query hook

Requirements:

Basic React Knowledge
Basic Redux-Toolkit Knowledge

Project Setup

We'll start by installing redux-toolkit & react-redux library, so open a terminal and run the command below.

npm install @reduxjs/toolkit react-redux

Now, Create a folder named redux inside the src folder.
Inside this redux folder, We'll create our api.js & store.js files.

api.js

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

// Generates react hooks for endpoints
export const api = createApi({
    reducerPath: "api",
    baseQuery: fetchBaseQuery({baseUrl: "https://jsonplaceholder.typicode.com/"}),
    endpoints: (builder) => ({
        getUsers: builder.query({
            query: (user) => `users/${user}`
        }),
    })
});

// Export endpoints as hooks
export const { useGetUsersQuery } = api;

store.js

import { configureStore } from "@reduxjs/toolkit";
import { api } from "./api";

// Combines multiple states as root state
export const store = configureStore({
    reducer: {
        [api.reducerPath]: api.reducer,
    },
    // getDefaultMiddleware enables important feature like caching.
    middleware: (getDefaultMiddleware) => {
        return getDefaultMiddleware().concat(api.middleware)
    }
});

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from "react-redux";
import { store } from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    // Wrap root component with Provider
    // Provider accepts store (root state) as prop
    <Provider store={store}> 
      <App />
    </Provider>
  </React.StrictMode>
);

Solution 1: Using skip parameter

App.js

import { useEffect, useState } from "react";
import { useGetUsersQuery } from "./redux/api";

function App() {
  const [userData, setUserData] = useState();
  const [isUser, setIsUser] = useState(true);
  // Pass skip parameter that accepts a boolean
  const { data } = useGetUsersQuery(1, { skip: isUser });

  useEffect(() => {
    if(data) {
      setUserData([data]);
    }
    console.log(data)
  },[data])

  return (
    <div className="App"> 
      {userData && userData.map(item => (
        <div key={item.id}> 
          <p>{item.name}</p> 
          <p>{item.email}</p> 
        </div> 
      ))}
      // Triggers fetch as skip parameter is false
      <button onClick={() => setIsUser(false)}>Fetch User</button> 
    </div> 
  );
}

export default App;

Solution 2: Using Lazy Query hook

For using a Lazy Query hook, we have to make a minor change to the exports inside the api.js file.

api.js

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const api = createApi({
    reducerPath: "api",
    baseQuery: fetchBaseQuery({baseUrl: "https://jsonplaceholder.typicode.com/"}),
    endpoints: (builder) => ({
        getUsers: builder.query({
            query: (user) => `users/${user}`
        }),
    })
});

// Add Lazy after "use" to convert it into Lazy Query hook
export const { useLazyGetUsersQuery } = api;

App.js

import { useEffect, useState } from "react";
import { useLazyGetUsersQuery } from "./redux/api";

function App() {
  const [userData, setUserData] = useState();
  // Returns trigger function and results object
  const [getUsers, results] = useLazyGetUsersQuery();

  useEffect(() => {
    if(results && results.data) {
      setUserData([results.data]);
    }
    console.log(results)
  },[results])

  return (
    <div className="App">
      {userData && userData.map(item => (
        <div key={item.id}>
          <p>{item.name}</p>
          <p>{item.email}</p>
        </div>
      ))}
      // Fetch data on button click by envoking trigger function
      <button onClick={() => getUsers(1)}>Fetch User</button>
    </div>
  );
}

export default App;

Video Tutorial:

Thanks for reading! ❤

How To Change/Install Font In VS Code Editor (Windows)

Kunal Ukey — Mon, 19 Sep 2022 04:17:10 +0000

Visual Studio Code is the most popular and the first choice among developers in terms of a code editor.
We spent hours in VS code, and we may grow tired and bored of looking at the same font that VS code provides by default.
Changing a font could help you, like better code vision, focus, and a fresh look.
So, let's see how to change or install a font in VS Code (windows).

Requirements:

Visual Studio Code - Download Here
Windows PC

1. Downloading Font

We will start by downloading the font for our code editor. You can download any of your favorite fonts but make sure that it is in the Monospace font category (although not mandatory).
Some of the popular font websites are:

2. Installing Font

Once you have downloaded and extracted a Font file, you can select your desired weight file and click on it. You will see a preview screen with each character. Just click on Install, given at the top left corner.

3. Check Installation

To check if the font is installed or not, you have to go to the font settings menu. To do so, press the windows key and search font settings. You should see the font settings shortcut, click on it.
Search for the font you have just installed. If you see the font, you are good to go! If not, try re-installing it and then restart your PC.

4. Add Font to VS Code

Open VS code and goto settings. You can go to settings by pressing Ctrl + , together or by clicking File > Preferences > Settings.
In Font Family input field, type the font family name you just installed at the very start from the given font family names and then press Ctrl + S to save the changes.

5. Enable Font Ligatures

If you are using some special font, then you might also want to enable the font ligature option in your code editor. To do so, again go to settings and search font ligatures in the search field or you can also click Text Editor > Font > Font Ligatures.
Click Edit in settings.json, a settings.json file should open.
Just change "editor.fontLigatures": false, to "editor.fontLigatures": true,

That's it!
If you still not seeing the changes, then just restart the VS code editor or restart your PC.

Thank you for reading! ❤

Dark Mode Toggle Feature (CSS only)

Kunal Ukey — Fri, 09 Sep 2022 11:42:25 +0000

If you have been familiar with CSS for some time, then you know how powerful it is, not just for plane-styling HTML documents.
In this article, I will show you how you can achieve a dark mode toggle feature in your project using just CSS!
BTW this is my first article on dev.to so bear with me for some mistakes which I am surely going to make 😬

Things you need to know:

HTML
CSS

Approach

In our project, we will use a checkbox to toggle between light mode and dark mode. We will style the container's background and font color based on a checkbox property to wrap up our entire page content.

HTML

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" href="style.css" type="text/css">
      <title>Dark Mode Toggle</title>
   </head>
   <body>
      <!-- Checkbox Toggle -->
      <input type="checkbox" id="toggle">

      <!-- Container -->
      <div class="container">
         Make sure to include all your content inside this container div.
      </div>

   </body>
</html>

CSS

Universal & Container Styling

We will start by giving the styling to the universal selector and the container.

/* Universal Styling */
* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

/* Container for all the elements */
.container {
  width: 100%;
  min-height: 100vh;
  padding: 10px;
  background-color: #EEE;
  color: #333;
  transition: all 0.4s ease-out;
}

Toggle Button Styling

Now we will turn our checkbox into a toggle button by applying some simple styles.

/* Toggle Button */
#toggle {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: 60px;
  height: 30px;
  border-radius: 30px;
  background-color: #333;
  position: absolute;
  top: 50px;
  right: 50px;
  transition: all 0.5s ease-in;
  cursor: pointer;
  z-index: 1;
}

/* Making a dot switch inside the Toggle Button */
#toggle::before {
  content: "";
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #EEE;
  position: absolute;
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  transition: all 0.5s ease-in;
}

/* Changing toggle button background when checked */
#toggle:checked {
  background: #03FFC0;
}

/* Changing dot switch color and moving to the right side when checked */
#toggle:checked::before {
  background: #333;
  left: 32px;
}

Final Styling

Finally, we will change the container background using this style when the checkbox property is checked.

/* Changing the background & font color when checked */
#toggle:checked ~ .container {
  background-color: #333;
  color: #EEE;
}

That's it! 🤩 You now have the fully working page with the dark mode toggle feature.
See the complete source code here.
Video Tutorial: here.

Thank you for reading! ❤

DEV Community: Kunal Ukey

How to Use Patch-Package to Fix Broken Node Modules Instantly! 🚀🔗

Why Modify an NPM Package?

Step 1: Install patch-package

Step 2: Modify the Package Code

Step 3: Create a Patch File

Step 4: Handle Binary Files (SVG, GIF, etc.)

Step 5: Apply Patches After Installing Packages

Conclusion:

How To Add Dark Mode Toggle in ReactJS + TailwindCSS + DaisyUI ⚛️🌼

Introduction:

Prerequisites:

Initiate ReactJS project

Installing and Configuring TailwindCSS

Installing and Configuring DaisyUI

Navbar component

Hero component (Optional)

Adding Navbar and Hero components to App.js

Implementing Dark Mode Toggle functionality

Conclusion:

How to Create your Own useWindowSize Hook in ReactJS

Introduction:

Approach:

App.js

styles.css

useWindowSize Hook

useWindowSize.js

Using useWindowSize Hook

App.js

How to Setup and Deploy a MERN stack project for FREE 🌐🚀

Introduction:

Root Folder

Setting-up Backend

app.js

Setting-up Frontend

App.js

Deleting .git folder inside client

Setting-up Root folder for Deployment

package.json

.gitignore

Creating GitHub Repository

Deploy to Render.com

Add Backend URL to Frontend

App.js

Deploy Frontend

Add Frontend URL to Backend

app.js

Why you should use TailwindCSS in your ReactJS project

What is Tailwind CSS?

Why is Tailwind CSS better than its competitors?

How to install Tailwind CSS in your ReactJS project?

What is the Tailwind config file?

What are Tailwind base, components, and utilities directives?

What is Tailwind JIT, and how does it work in the newer Tailwind version?

How does Tailwind reduce CSS size, and how it reduces it in the newer version?

How to write cleaner Tailwind code?

Before

After

Scroll To Top when Route Changes - ReactJS & React Router

Introduction:

Installation

Custom ScrollToTop Component

ScrollToTop.js

Wrapping Root Component with BrowserRouter

index.js

App.js

Make Your Own Lazy Loading Image Component In React

Introduction

Normal Use Case of Images In ReactJS

Solution:

Custom Lazy Loading Image Component

LazyImage.js

Final Code for Lazy Loading Image Component

LazyImage.js

Multiple Parameters In Redux-Toolkit Query (RTK Query)

Project Setup

api.js

store.js

index.js

In General, Query using single parameter.

Custom `ScrollToTop` Component

Wrapping Root Component with `BrowserRouter`