hooks.resize.js Maven / Gradle / Ivy

Go to download

Show more of this group Show more artifacts with this name
Show all versions of gears-frontend Show documentation

GEARS Frontend

There is a newer version: 0.80.3

import { useCallback, useEffect, useState } from 'react'

// parameter:
// type UseResizeProps = {
//   minWidth: number
// }

// return type: 
// type UseResizeReturn = {
//   width: number
//   enableResize: () => void
// }

const useResize = ({minWidth}) => {
  const [isResizing, setIsResizing] = useState(false)
  const [width, setWidth] = useState(minWidth)

  const enableResize = useCallback(() => {
    setIsResizing(true)
  }, [setIsResizing])

  const disableResize = useCallback(() => {
    setIsResizing(false)
  }, [setIsResizing])

  const resize = useCallback(
    (e) => {
      if (isResizing) {
        const newWidth = e.clientX // You may want to add some offset here from props
        if (newWidth >= minWidth) {
          setWidth(newWidth)
        }
      }
    },
    [minWidth, isResizing, setWidth],
  )

  useEffect(() => {
    document.addEventListener('mousemove', resize)
    document.addEventListener('mouseup', disableResize)

    return () => {
      document.removeEventListener('mousemove', resize)
      document.removeEventListener('mouseup', disableResize)
    }
  }, [disableResize, resize])

  return { width, enableResize }
}

export default useResize