useKeyboardHeight

useKeyboardHeight es un Hook de React que hace un seguimiento de la altura del teclado en pantalla. Devuelve la altura actual del teclado en píxeles, que se actualiza automáticamente cuando el teclado aparece, desaparece o cambia de tamaño.

Interfaz

function useKeyboardHeight(
  options?: UseKeyboardHeightOptions
): UseKeyboardHeightResult;

Parámetros

• optionsUseKeyboardHeightOptions
  

  Opciones de configuración.

  • options.immediateboolean · true
    

    Si es true, obtiene la altura inicial del teclado al montar el componente.

Valor de retorno

• UseKeyboardHeightResult
  

  Un objeto que contiene la altura actual del teclado.

  • keyboardHeightnumber
    

    La altura actual del teclado en píxeles. Es 0 cuando el teclado está oculto.

Ejemplo

function ChatInput() {
  const { keyboardHeight } = useKeyboardHeight();

  return (
    <div style={{ paddingBottom: `${keyboardHeight}px` }}>
      <input type="text" placeholder="Escribe un mensaje..." />
    </div>
  );
}

function KeyboardStatus() {
  const { keyboardHeight } = useKeyboardHeight();

  return (
    <div>
      {keyboardHeight > 0
        ? `El teclado está abierto (${keyboardHeight}px)`
        : 'El teclado está cerrado'}
    </div>
  );
}