Ionic5 React – Hide Header on scroll

[florianbepunkt]

I read through a lot of posts regarding hiding a header on scroll, but they all deal with angular and Ionic 4. So I tried to implement this on my own.

For good performance I want to use translateY to move the header up on scroll. But the content below is not following, leaving a gap at the top.

Any idea how to solve this, so that the content moves up, when I move the header up?

[bitti]

Hi!
We have created a package to modify the IonHeader component using a react hook.

This is the package: https://github.com/codesyntax/ionic-react-header-collapse

To use it could not be easier. Install it, and pass the reference to the IonHeader component.

Example

import React, { Component } from 'react';

import { UseIonHeaderCollapse, useIonHeaderCollapse } from '@codesyntax/ionic-react-header-collapse';

const Home: React.FC = () => {
  const { ref } = useIonHeaderCollapse({} as UseIonHeaderCollapse);
  render() {
    return (
      <IonPage>
        <IonHeader ref={ref}>
          <IonToolbar>
            <IonTitle>Ionic header</IonTitle>
          </IonToolbar>
        </IonHeader>
        <IonContent fullscreen>
          ...
        </IonContent>
      </IonPage>
      );
  }
}

Result