Backdrop

사용자의 초점을 화면의 특정 요소로 좁히도록 하는 요소입니다.

Example

It can only be viewed in a mobile.

Steps

Prerequisite

Add Util Function

utils/backdrop.ts

export const backdrop = (open: boolean) => EventListener.emit('backdrop', open)

Copy Code

containers/Backdrop/index.tsx

'use client'
 
import { memo, useCallback, useEffect, useState } from 'react'
import { Spinner } from 'components'
import { createPortal } from 'react-dom'
import { EventListener } from 'utils'
 
function Backdrop() {
  const [isOpen, setIsOpen] = useState<boolean>(false)
 
  const listener = useCallback(({ detail }: any) => {
    setIsOpen(detail)
    if (detail) document.body.style.overflow = 'hidden'
    else document.body.removeAttribute('style')
  }, [])
 
  useEffect(() => {
    EventListener.add('backdrop', listener)
    return () => EventListener.remove('backdrop', listener)
  }, [listener])
  if (!isOpen) return <></>
  return createPortal(
    <div role="progressbar">
      <div className="fixed inset-0 z-40 cursor-progress bg-black opacity-30" />
      <span className="fixed left-1/2 top-1/2 z-50 -translate-x-1/2 -translate-y-1/2 cursor-progress">
        <Spinner className="h-10 w-10 text-neutral-50" />
      </span>
    </div>,
    document.body
  )
}
 
export default memo(Backdrop)

Usage

<Backdrop />

BackTop Badge