A react hook to handle keyboard show/hide

MyComponent.tsx

const { inputting } = useInputting()

<div style={{ height: inputting ? '50vh' : '100vh' }}>
  ...

useInputting.ts

export function useInputting() {
  const [inputting, setInputting] = useState(false)

  useEffect(() => {
    const handler = () => {
      setInputting((st) => !st)
    }
    document.addEventListener('focusin', handler)
    document.addEventListener('focusout', handler)
    return () => {
      document.removeEventListener('focusin', handler)
      document.removeEventListener('focusout', handler)
    }
  }, [])

  return { inputting }
}