Crear un pie de página fijo en React

A menudo necesitamos declarar o desviar la atención de los usuarios hacia algo importante cuando desarrollamos aplicaciones modernas.

Se puede lograr creando un pie de página adhesivo. Como sugiere el nombre, los pies de página adhesivos se adhieren a la parte inferior de la vista de los usuarios y permanecen allí incluso si los usuarios se desplazan.

Los pies de página adhesivos son particularmente útiles si tiene una página larga en la que se puede desplazar pero desea mostrar una interfaz de usuario antes de que los usuarios lleguen al final de la página.

Con un poco de magia CSS y conocimientos básicos de HTML, también puedes crear un pie de página fijo en React.

Uso de CSS regular y React para crear un pie de página fijo en React

Crear un pie de página adhesivo en React es más complejo que simplemente crear un div y fijar su posición en la parte inferior; establecer una propiedad position:fixed en un div es un buen comienzo, pero no suficiente.

El problema con el valor fixed es que elimina el elemento del flujo normal del documento. Por lo tanto, si hay algún elemento de la interfaz de usuario o texto en la parte inferior de su página, se superpondrá con el div pegajoso.

A pesar de esta deficiencia, todavía es necesario position:fixed para crear un pie de página adhesivo.

La solución es crear un contenedor div (un elemento div que ocupa espacio en el flujo del documento). La creación de un div de este tipo le permite reservar espacio para que el pie de página adhesivo no se superponga con ningún elemento HTML normal.

Veamos el código:

function StickyFooter({ children }) {
  let regularDiv = {
    backgroundColor: "black",
    borderTop: "2px solid red",
    textAlign: "center",
    padding: "40px",
    position: "fixed",
    left: "0",
    bottom: "0",
    height: "80px",
    width: "100%",
}
let wrapperDiv = {
  display: 'block',
  padding: '40px',
  height: '80px',
  width: '100%',
}
    return (
        <div style={{height: "200vh"}}>
            <div style={wrapperDiv} />
            <div style={regularDiv}>
                { children }
            </div>
        </div>
    )
}

Aquí, definimos un div pegajoso y un div de envoltura para reservarle espacio. De esta manera, el div pegajoso no cubrirá ninguna parte de su página.

También puedes desestructurar los accesorios, como en el ejemplo. Cualquier elemento que coloque entre las etiquetas de apertura y cierre del componente StickyFooter irá dentro del pie de página adhesivo.