Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ahmnouira/ionic-react-header-parallax
Easy to use hook to handle the parallax effect for IonHeader component in React Ionic.
https://github.com/ahmnouira/ionic-react-header-parallax
ionic ionic-4 ionic5 parallax parallax-effect react-ionic
Last synced: 2 days ago
JSON representation
Easy to use hook to handle the parallax effect for IonHeader component in React Ionic.
- Host: GitHub
- URL: https://github.com/ahmnouira/ionic-react-header-parallax
- Owner: ahmnouira
- License: mit
- Created: 2021-08-17T03:02:03.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-11-07T00:53:32.000Z (6 days ago)
- Last Synced: 2024-11-07T01:39:49.275Z (6 days ago)
- Topics: ionic, ionic-4, ionic5, parallax, parallax-effect, react-ionic
- Language: TypeScript
- Homepage:
- Size: 5.15 MB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
Easy to use hook to handle the parallax effect for IonHeader component in React Ionic.
## Overview
## [Youtube video URL](https://www.youtube.com/watch?v=YZ5nlRjstA4)
## Installation with npm
```sh
npm install ionic-react-header-parallax --save
```
## Installation with yarn
```sh
yarn add ionic-react-header-parallax
```
## Example
```tsx
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 (
Post Title
{...}
)
}
export default Home
```
## API
- [useIonHeaderParallax](https://github.com/ahmnouira/ionic-react-header-parallax#useIonHeaderParallax)
### `useIonHeaderParallax`