TLDR 👀

If you are a PRO and only interested in implementation then in this Github Repository you can find the code.

First of all forget that you are a <Developer />
Instead you are an End-User 👩‍💻 of an Application and you have clicked a Button in the UI and nothing happened for a while and suddenly a new element popups up in the screen.

You will have to work your brain 🧠 for some seconds to figure out what happened. Just like the below image👇

You definitely don’t want your Users to work their brain out to use your Application.

You should have a Loader/Spinner to indicate your users that something is happening behind the UI that they can’t see

So there is nothing new in this

Majority of you guys knew this. But then also we sometimes forget to add loading state in our applications, or feel lazy to add multiple loading state in our components

In React ⚛️ we generally have this👇 mess of (useState)s when we implement multiple pending state UI in a component

import { useState } from 'react'

export const SomeComponent = () => {
  const [isCarsLoading, setIsCarsLoading] = useState(false)
  const [isEngineLoading, setIsEngineLoading] = useState(false)
  
  const fetchCars = () => {
    try {
      setIsCarsLoading(true)
      ...
    } catch (error) {
      ...
    } finally {
      setIsCarsLoading(false)      
    }
  }
  
  const fetchEngineByCarModel = (carModel: string) => {
    try {
      setIsEngineLoading(true)
      ...
    } catch (error) {
      ...
    } finally {
      setIsEngineLoading(false)      
    }
  }

By this above implementation we need to always declare a separate loading state and conditionally render a Loader/Spinner for the showing pending state in UI

I think it will be great ✨ if we have some function to Start/Stop a Loader from any where in the Component Tree and it will show a generic loader.

And if we want something other than the generic loader then only we will add a separate loading states in components

So our implementation of the Generic Global Loader’s Architechture will look like this 👇

Let’s try to code this </>

Step 1: At first create the LoaderContext and it’s Type

//LoaderProvider.ts

export type LoaderContextProps = {
  isLoading: boolean
  start: () => void
  stop: () => void
}

export const LoaderContext = createContext<LoaderContextProps>({} as LoaderContextProps)

Step 2: Now let’s create a Provider for this Context

//LoaderProvider.ts

export const LoaderProvider = ({ children }: { children: ReactNode }) => {
  const [isLoading, setIsLoading] = useState(false)
  const [loaderText, setLoaderText] = useState('')

  const start = (loaderText = 'Loader...') => {
    setLoaderText(loaderText)
    setIsLoading(true)
  }

  const stop = () => setIsLoading(false)

  return (
    <LoaderContext.Provider
      value={{
        isLoading,
        start,
        stop,
        loaderText
      }}
    >
      {children}
    </LoaderContext.Provider>
  )
}

In this Context we have

• isLoading → (this is a state which trigger the loading state)
• start → (function that will take a loader text optionally and will setIsLoading to true)
• stop → (function that will setIsLoading to true)
• loaderText → (this is a state which stores the LoaderText)

Step 3: Create a helper Custom Hook for this context

//LoaderProvider.ts

export const useLoader = () => {
  const loaderContext = useContext(LoaderContext)

  if (!loaderContext) {
    throw new Error('Please use useLoader inside the context of LoaderProvider')
  }

  return {
    start: loaderContext.start,
    stop: loaderContext.stop
  }
}

Step 4: Now let’s create a <Loader /> Component which will listen to the isLoading State of <Loader/> Context

//Loader.tsx

import { useContext } from 'react'
import { LoaderContext } from '@/stores/LoaderProvider.tsx'
export const Loader = () => {
  const { isLoading, loaderText } = useContext(LoaderContext)
  return (
    <>
      {isLoading ? (
        <div className="h-full w-full fixed top-0 left-0 bg-black/20 z-[99999]">
          <div className="fixed top-1/2 -translate-x-1/2 left-1/2 -translate-y-1/2 flex flex-col items-center gap-4">
            <span className="loading loading-spinner loading-lg text-primary" />
            <span className="text">{loaderText}</span>
          </div>
        </div>
      ) : null}
    </>
  )
}

Now Let’s implement this Global <Loader/> Component on a Page

// Employees.tsx

import { useLoader } from '@/stores/LoaderProvider.tsx'
import { useEffect, useState } from 'react'
import { Employee } from '@/constants/employees.ts'
import { fetchEmployees } from '@/apis/employees.ts'

export const EmployeesList = () => {
  const [employees, setEmployees] = useState<Array<Employee>>([])
  const loader = useLoader()
  const getEmployees = async () => {
    try {
      loader.start()
      const employees = await fetchEmployees()
      setEmployees(employees)
    } catch (e) {
      alert('Employees cannot be fetched!')
    } finally {
      loader.stop()
    }
  }
  useEffect(() => {
    void getEmployees()
  }, [])
  if (!employees?.length) {
    return <></>
  }
  return (
    <>
      <h1 className="text-3xl font-bold mb-4">Employees</h1>
      <button className="btn btn-primary btn-sm" onClick={getEmployees}>
        Re-fetch
      </button>
      <div className="overflow-x-auto mt-8">
        <table className="table w-full">
          <thead>
            <tr>
              <th></th>
              <th>Name</th>
              <th>Email</th>
              <th>Phone</th>
            </tr>
          </thead>
          <tbody>
            {employees.map((employee, index) => (
              <tr key={employee.id}>
                <th>{index + 1}</th>
                <td>{employee.name}</td>
                <td>{employee.email}</td>
                <td>{employee.phone}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </>
  )
}

Voila 🌟, now we can have loader state which we can trigger from anywhere without any extra loading state in your component

But we have a problem with this implementation 😢

Since we have a single Loading State in the Context and multiple components will toggle this loader text

There will be a situation where a request named requestA that takes 300ms to execute
And simultaneously we have another request named requestB which takes 200ms to execute

And if both the requests calls loader.start() at start of execution then the loader will start at same time
but will stop when the requestB stops executing while requestA is still in the progress of execution.

So we won’t have a spinner for the entire execution time of requestA

Solution 🌟

We will introduce a loader stack where loader.start() will insert a value in the stack and loader.stop() will delete a value from the stack

• So if the stack is not empty then the value of isLoading will be true
• And if the stack is empty then the value of isLoading will be false

Now let’s change the implementation in ContextProvider

// LoaderProvider.ts

import { createContext, ReactNode, useContext, useEffect, useState } from 'react'

export type LoaderContextProps = {
  isLoading: boolean
  loaderText: string
  start: (loaderText?: string) => void
  stop: () => void
}

export const LoaderContext = createContext<LoaderContextProps>({} as LoaderContextProps)

export const LoaderProvider = ({ children }: { children: ReactNode }) => {
  const [isLoading, setIsLoading] = useState(false)
  const [loaderText, setLoaderText] = useState('')
  const [loaderStack, setLoaderStack] = useState<Array<boolean>>([])

  const start = (loaderText = 'Loader...') => {
    setLoaderText(loaderText)
    setLoaderStack([...loaderStack, true])
  }

  const stop = () => setLoaderStack([...loaderStack.slice(1)])

  useEffect(() => {
    if (!loaderStack.length) {
      setIsLoading(false)
      return
    }
    setIsLoading(true)
  }, [loaderStack, start, stop])

  return (
    <LoaderContext.Provider
      value={{
        isLoading,
        start,
        stop,
        loaderText
      }}
    >
      {children}
    </LoaderContext.Provider>
  )
}

export const useLoader = () => {
  const loaderContext = useContext(LoaderContext)

  if (!loaderContext) {
    throw new Error('Please use useLoader inside the context of LoaderProvider')
  }

  return {
    start: loaderContext.start,
    stop: loaderContext.stop
  }
}

Wrapping Up

Building scalable and easy-to-use components is every developer’s dream. Feel free to use and tweak them in your projects, and remember happy coding, React developers! 😎✨

Feedback ✉️

Please let me know if you have some suggestions on it and feel free to fork it from this repo and change it however you want.

🚀 A simple implementation of a Loader in React ⚛️ using [ContextAPI, Custom Hook, and TypeScript] was originally published in TechVerito on Medium, where people are continuing the conversation by highlighting and responding to this story.

As front-end developers, we often find ourselves grappling with the challenge of creating reusable and scalable UI components. Consider this an attempt to create a reusable <Modal /> component for React.

TLDR 👀

If you are a PRO and only interested in implementation then in this Github Repository you can find the code.

✨ Inspiration

I was onboarded on a project where I was assigned to build a component library from scratch.
Modal component was one of them,
and TailwindCSS and DaisyUI was chosen because those were aligning with our project’s styling needs.

Problem 🤔

While browsing DaisyUI’s Modal documentation, I was wondering how to create a reusable React component without…

const [isModalOpen, setIsModalOpen] = useState<boolean>(false)

return (
  <>
    <Modal isOpen={isModalOpen}>
      ...modal content
      <button onClick({() => setIsModalOpen(false)})>
        Okay
      </button>
    </Modal>
    
    <button onClick({() => setIsModalOpen(true)})>
      Open Dialog
    </button>
  </>
)

maintaining a state for opening and closing.

As we can see, the problem 🤔 is that we have to maintain a state [isModalOpen] for displaying the modal every time where we want to use it. 🔄

This solution is not:

• Clean ❌
• Readable ❌
• Developer friendly ❌

Solution

All of these code are in this Github Repository

1. At first, we will create a Custom <Modal /> Component which will contain the:
   + HTML Dialog element
   + The backdrop for the modal
   + And all the necessary styles

2. Then we will introduce a Custom useModal Hook which builds this Modal component with necessary props 🛠️ and will provide functions that will toggle the Popup/Dialog in the UI ✨

Let’s build the <Modal /> Component

Here is the code of the component

import { forwardRef, ReactNode } from 'react'

export type ModalProps = {
  children?: ReactNode
  onBackdropClick?: () => void
  modalBoxClassName?: string
  // you can add more classNames as per your level of customisation needs
}

export const Modal = forwardRef<HTMLDialogElement, ModalProps>(
  ({ children, modalBoxClassName, onBackdropClick }, ref) => {
    return (
      <dialog ref={ref} className="modal">
        <div className={`modal-box ${modalBoxClassName ?? ''}`}>{children}</div>
        <form method="dialog" className="modal-backdrop">
          <button
            type="button"
            onClick={() => {
              onBackdropClick && onBackdropClick()
            }}
          >
            close
          </button>
        </form>
      </dialog>
    )
  }
)

Props

1. children: this will be used to render content inside the modal
2. ref: (important) It will take an HTMLDialogRef to toggle the modal open state
3. onBackdropClick: (optional) will take a function in case we need to close the modal on click of the modal backdrop
4. modalBoxClassName: (optional) will take CSS classes to modify the styles in case we need a different style for the modal container.

Usage

If we want to use this component without the hook then we have to declare a ref [with a type of <HTMLDialogElement>] everywhere we want to use this component

const modalRef = useRef<HTMLDialogElement>(null)

return (
  <div>
   <Modal ref={modalRef}>
    <h1 className="text-2xl font-bold">I am your modal's title</h1>
      <div className="py-4">
        <p className="text-lg">I am you modal's content</p>
      </div>
      <div className="flex items-center w-full">
      <button className="btn ml-auto" onClick={() => modalRef?.current?.close()}>
        Close
      </button>
    </div>
   </Modal>    
   <button className="btn ml-auto" onClick={() => modalRef?.current?.showModal()}>
     Close
   </button>
  </div>
)

Declaring a ref 👆 every time is a pain, So let’s improve this implementation!

Let’s make it better with useModal custom hook

Instead of directly using the <Modal /> Component we will now access it via useModal Custom Hook

import { ReactNode, useRef } from 'react'
import { Modal, ModalProps } from '../components/Modal.tsx'

export type UseModalResp = {
  modal: ReactNode
  closeModal: () => void
  openModal: () => void
  modalBoxClassName?: string
}

export type UseModalProps = Omit<ModalProps, 'onBackdropClick'> & {
  shouldAllowBackdropClick?: boolean //if it is true then modal can be closed
  onModalOpen?: () => void //this function will be called on calling of openModal
  onModalClose?: () => void //this function will be called on calling of closeModal
}

export const useModal = ({
  children,
  modalBoxClassName,
  shouldAllowBackdropClick = true,
  onModalClose,
  onModalOpen
}: UseModalProps): UseModalResp => {
  const ref = useRef<HTMLDialogElement | null>(null)

const closeModal = () => {
    onModalClose && onModalClose()
    ref.current?.close()
  }

const openModal = () => {
    onModalOpen && onModalOpen()
    ref.current?.showModal()
  }

const modal: ReactNode = (
    <Modal
      onBackdropClick={() => {
        if (shouldAllowBackdropClick) {
          closeModal()
        }
      }}
      ref={ref}
      modalBoxClassName={modalBoxClassName}
    >
      {children}
    </Modal>
  )

return {
    closeModal,
    openModal,
    modal
  }
}

Props

• children: this will be used to render content inside the modal
• modalBoxClassName: (optional) will take CSS classes to modify the styles in case we need a different style for the modal container.
• shouldAllowBackdropClick: (optional) If passed then this flag determines whether the modal will close on click of backdrop
• onModalOpen: (optional) If passed then this function will be called while opening the modal
• onModalClose: (optional) If passed then this function will be called while closing the modal

Returns

1. modalComponent: this will contain the complete modal with children passed to it that we wanted to render.
2. openModal: this is the function that we will call to open the modal
3. close modal: this is the function that we will call to close the modal

Why do we need this hook? 🪝

const App = () => {
  const { modal, openModal, closeModal } = useModal({
    children: (
      <>
        <h1 className="text-2xl font-bold">I am your modal's</h1>
        <div className="py-4">
          <p className="text-lg">I am your modal's content</p>
        </div>
        <div className="flex items-center w-full">
          <button className="btn ml-auto" onClick={() => closeModal() //closing the modal}>
            Close
          </button>
        </div>
      </>
    )
  })

return (
    <div className="bg-base-100 w-[100svw] h-[100svh] flex flex-col items-center justify-center">
      {modal} {/*.  <---- rendering the modal component*/}
      <button className="btn btn-primary" onClick={() => openModal() //opening the modal}>
        Open Modal
      </button>
    </div>
  )
}

This solution is

• Clean ✅
• Readable ✅
• Developer friendly ✅

1. We don’t need to maintain a state whenever we want to use a modal
2. Neither we need to use a ref to show and close a modal

If we don’t want to add JSX above the return statement then we can extract it to a different component

<>
  <h1 className="text-2xl font-bold">I am your modal's</h1>
  <div className="py-4">
    <p className="text-lg">I am your modal's content</p>
  </div>
  <div className="flex items-center w-full">
     <button className="btn ml-auto" onClick={() => closeModal() //closing the modal}>
      Close
    </button>
  </div>
</>

Then our code will look like this 👇

const App = () => {
  const { modal, openModal, closeModal } = useModal({
    children: <MyDummyModal closeModal={() => closeModal} />
  })

return (
    <div className="bg-base-100 w-[100svw] h-[100svh] flex flex-col items-center justify-center">
      {modal} {/*rendering the modal component*/}
      <button className="btn btn-primary" onClick={() => openModal()}>
        Open Modal
      </button>
    </div>
  )
}

And voilà! With just a few lines of code, your modal is ready. The Component illustrates how effortlessly you can integrate this modal into your project 👍.

Wrapping Up

Building scalable and easy-to-use components is every developer’s dream. Feel free to use and tweak them in your projects, and remember happy coding, React developers! 😎✨

Feedback ✉️

Please let me know if you have some suggestions on it and feel free to fork it from this repo and change it however you want.

🚀 Building Scalable React Modal Component with Custom Hook 🛠️ [TailwindCSS, DaisyUI, and… was originally published in TechVerito on Medium, where people are continuing the conversation by highlighting and responding to this story.