Easy to use hook to handle the parallax effect for IonHeader component in React Ionic.

Overview

Youtube video URL

Installation with npm

npm install ionic-react-header-parallax --save

Installation with yarn

yarn add ionic-react-header-parallax

Example

import * as React from 'react'
import { IonBackButton, IonButtons, IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/react'
import { useIonHeaderParallax } from 'ionic-react-header-parallax'

const Home: React.FC = () => {

   const { ref } = useIonHeaderParallax({
    image: 'https://picsum.photos/1080',
    showBarButtons: true,
  })

  return (
    <IonPage>
      <IonHeader ref={ref}>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton defaultHref="/" />
          </IonButtons>
          <IonTitle>Post Title</IonTitle>
        </IonToolbar>
      </IonHeader>

      <IonContent className="ion-padding-start ion-padding-end">
        {...}
      </IonContent>
    </IonPage>
  )
}

export default Home

API

• useIonHeaderParallax

useIonHeaderParallax