useAvoidKeyboard

useAvoidKeyboard es un Hook de React que ayuda a evitar que el teclado en pantalla cubra los elementos fijos en la parte inferior. Devuelve un estilo CSS que puedes aplicar a elementos con position: fixed para desplazarlos suavemente por encima del teclado cuando aparece.

Interfaz

function useAvoidKeyboard(
  options?: UseAvoidKeyboardOptions
): UseAvoidKeyboardResult;

Parámetros

• optionsUseAvoidKeyboardOptions
  

  Opciones de configuración.

  • options.safeAreaBottomnumber · 0
    

    Desplazamiento inferior base en píxeles cuando el teclado está oculto. Útil para tener en cuenta el área del indicador de inicio del iPhone.

  • options.transitionDurationnumber · 200
    

    Duración de la transición en milisegundos para una animación fluida.

  • options.transitionTimingFunctionCSSProperties['transitionTimingFunction'] · 'ease-out'
    

    Función de temporización de la transición para la animación.

  • options.immediateboolean · true
    

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

Valor de retorno

• UseAvoidKeyboardResult
  

  Un objeto que contiene el estilo CSS para evitar que el teclado cubra el elemento.

  • styleCSSProperties
    

    Objeto de estilo CSS que puedes aplicar al elemento fijo en la parte inferior. Contiene las propiedades transform y transition.

Ejemplo

function FixedBottomCTA() {
  const { style } = useAvoidKeyboard();

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        ...style,
      }}
    >
      <button>Enviar</button>
    </div>
  );
}

// Con desplazamiento inferior del área segura (p. ej., para el indicador de inicio del iPhone)
function FixedBottomCTA() {
  const { style } = useAvoidKeyboard({ safeAreaBottom: 34 });

  return (
    <div
      style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        ...style,
      }}
    >
      <button>Enviar</button>
    </div>
  );
}