Créer un pied de page collant dans React

Nous avons souvent besoin de déclarer ou de détourner l’attention des utilisateurs sur quelque chose d’important lors du développement d’applications modernes.

Cela peut être réalisé en créant un pied de page collant. Comme son nom l’indique, les pieds de page collants restent au bas de la vue des utilisateurs et y restent même si les utilisateurs défilent.

Les pieds de page collants sont particulièrement utiles si vous avez une longue page défilante mais que vous souhaitez afficher une interface utilisateur avant que les utilisateurs n’atteignent le bas de la page.

Avec un peu de magie CSS et des connaissances de base en HTML, vous pouvez également créer un pied de page collant dans React.

Utilisation de CSS standard et de React pour créer un pied de page collant dans React

Créer un pied de page collant dans React est plus complexe que de simplement créer un div et de fixer sa position vers le bas ; définir une propriété position:fixed sur un div est un bon début, mais pas suffisant.

Le problème avec la valeur fixed est qu’elle supprime l’élément du flux de documents normal. Par conséquent, s’il y a un élément ou un texte d’interface utilisateur au bas de votre page, il chevauchera le div collant.

Malgré ce défaut, position:fixed est toujours nécessaire pour créer un sticky footer.

La solution consiste à créer un wrapper div (un élément div qui prend de la place dans le flux de documents). La création d’un tel div vous permet de réserver de l’espace pour que le pied de page collant ne chevauche aucun élément HTML normal.

Regardons le code :

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>
    )
}

Ici, nous définissons un sticky div et un wrapper div pour lui réserver de l’espace. De cette façon, le div collant ne couvrira aucune partie de votre page.

Vous pouvez également déstructurer les accessoires, comme dans l’exemple. Tous les éléments que vous placez entre les balises d’ouverture et de fermeture du composant StickyFooter iront à l’intérieur du pied de page collant.