"use client"
 
import { usePreventZoom } from "@/hooks/use-prevent-zoom"
 
const App = () => {
  const { disableGlobal, enableGlobal, isGlobalDisabled } = usePreventZoom()
 
  return (
    <div>
      <p>Zoom is globally {isGlobalDisabled ? "disabled" : "enabled"}</p>
      <button onClick={disableGlobal}>Disable Zoom</button>
      <button onClick={enableGlobal}>Enable Zoom</button>
    </div>
  )
}

"use client"
 
import { usePreventZoom } from "@/hooks/use-prevent-zoom"
 
const App = () => {
  const { disableGlobal, enableGlobal, isGlobalDisabled, toggleGlobal } =
    usePreventZoom({ global: true })
 
  return (
    <div>
      <p>Zoom is globally {isGlobalDisabled ? "disabled" : "enabled"}</p>
      <button onClick={toggleGlobal}>
        {isGlobalDisabled ? "Enable" : "Disable"} Zoom
      </button>
    </div>
  )
}

"use client"
 
import { useRef } from "react"
 
import { usePreventZoom } from "@/hooks/use-prevent-zoom"
 
const App = () => {
  const { disableForElement, enableForElement } = usePreventZoom()
  const sectionRef = useRef<HTMLDivElement>(null)
 
  const handleDisableSection = () => {
    if (sectionRef.current) {
      disableForElement(sectionRef.current)
    }
  }
 
  const handleEnableSection = () => {
    if (sectionRef.current) {
      enableForElement(sectionRef.current)
    }
  }
 
  return (
    <div>
      <div ref={sectionRef} className="section">
        <p>This section can have zoom disabled specifically</p>
        <button onClick={handleDisableSection}>Disable Zoom for Section</button>
        <button onClick={handleEnableSection}>Enable Zoom for Section</button>
      </div>
    </div>
  )
}

"use client"
 
import { usePreventZoom } from "@/hooks/use-prevent-zoom"
 
const App = () => {
  const zoomControl = usePreventZoom({
    scroll: true, // Disable zoom via Ctrl+scroll
    keyboard: true, // Disable zoom via Ctrl+/- keys
    pinch: true, // Disable pinch-to-zoom on touch devices
    global: false, // Don't start with global disable
  })
 
  return (
    <div>
      <h1>Custom Zoom Control</h1>
      <button onClick={zoomControl.disableGlobal}>Disable All Zoom</button>
      <button onClick={zoomControl.enableGlobal}>Enable All Zoom</button>
    </div>
  )
}

usePreventZoom(options?: Options): Return

interface Options {
  scroll?: boolean
  keyboard?: boolean
  pinch?: boolean
  global?: boolean
}
 
interface Return {
  disableGlobal: () => void
  enableGlobal: () => void
  isGlobalDisabled: boolean
  disableForElement: (element: HTMLElement) => () => void
  enableForElement: (element: HTMLElement) => void
  toggleGlobal: () => void
}

import { useEffect, useRef } from "react"
 
import { usePreventZoom } from "@/hooks/use-prevent-zoom"
 
const Modal = () => {
  const modalRef = useRef<HTMLDivElement>(null)
  const { disableForElement } = usePreventZoom()
 
  useEffect(() => {
    if (modalRef.current) {
      const cleanup = disableForElement(modalRef.current)
      return cleanup // Cleanup when modal unmounts
    }
  }, [disableForElement])
 
  return (
    <div ref={modalRef} className="modal">
      <h2>Modal Content (Zoom Disabled)</h2>
      <p>Zoom is disabled within this modal</p>
    </div>
  )
}

import { useRef, useState } from "react"
 
import { usePreventZoom } from "@/hooks/use-prevent-zoom"
 
const ImageGallery = () => {
  const galleryRef = useRef<HTMLDivElement>(null)
  const [zoomDisabled, setZoomDisabled] = useState(false)
  const { disableForElement, enableForElement } = usePreventZoom()
 
  const toggleZoomForGallery = () => {
    if (galleryRef.current) {
      if (zoomDisabled) {
        enableForElement(galleryRef.current)
      } else {
        disableForElement(galleryRef.current)
      }
      setZoomDisabled(!zoomDisabled)
    }
  }
 
  return (
    <div>
      <button onClick={toggleZoomForGallery}>
        {zoomDisabled ? "Enable" : "Disable"} Zoom for Gallery
      </button>
      <div ref={galleryRef} className="image-gallery">
        <img src="/image1.jpg" alt="Image 1" />
        <img src="/image2.jpg" alt="Image 2" />
        <img src="/image3.jpg" alt="Image 3" />
      </div>
    </div>
  )
}