Skip to content

Latest commit

 

History

History
51 lines (35 loc) · 1.27 KB

File metadata and controls

51 lines (35 loc) · 1.27 KB

ionic-react-header-collapse

Easy to use hook to handle collapse effect on scroll for IonHeader component in React Ionic

Currently the package is in beta phase. Any issue or PR will be appreciated ;)

NPM JavaScript Style Guide

IOS/Android:

Install

npm install --save @codesyntax/ionic-react-header-collapse

Usage

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

License

MIT © CodeSyntax