@shopify/shop-minis-react/src/hooks/util/useKeyboardAvoidingView.ts

React component library for Shopify Shop Minis with Tailwind CSS v4 support (source-only, requires TypeScript)

import {RefObject, useCallback} from 'react'

import {useShopActions} from '../../internal/useShopActions'

export interface UseKeyboardAvoidingViewReturns {
  /**
   * function to call when the input is focused
   */
  onFocus: (ref: RefObject<HTMLElement | null>) => void
  /**
   * function to call when the input is blurred
   */
  onBlur: () => void
}

export const useKeyboardAvoidingView = (): UseKeyboardAvoidingViewReturns => {
  const {translateContentUp, translateContentDown} = useShopActions()

  const onFocus = useCallback(
    (ref: RefObject<HTMLElement | null>) => {
      if (ref.current) {
        const rect = ref.current.getBoundingClientRect()
        translateContentUp({inputYPosition: rect.bottom})
      }
    },
    [translateContentUp]
  )

  const onBlur = useCallback(() => {
    translateContentDown()
  }, [translateContentDown])

  return {
    onFocus,
    onBlur,
  }
}