Skip to content

ahmnouira/ionic-react-header-parallax

Repository files navigation

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

Overview

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

About

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

Topics

Resources

License

Stars

Watchers

Forks

Packages

No packages published

Contributors 3

  •  
  •  
  •