/ionic-react-header-parallax

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

Primary LanguageTypeScriptMIT LicenseMIT

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