Skip to content

Commit 6c85bf5

Browse files
ahmnouiraahmnouira
committed
fix: fixes
1 parent ec758a9 commit 6c85bf5

File tree

6 files changed

+86
-22
lines changed

6 files changed

+86
-22
lines changed

‎README.md

Lines changed: 64 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<h4 align="center">
2-
<b>Ionic React</b> libray to handle the parallax effect for <b>IonHeader</b> component
3-
</h4>
1+
<h1 align="center">
2+
<b>Easy to use hook to handle the parallax effect for <b>IonHeader</b> component React Ionic.
3+
</h1>
44

55
<p align="center">
66
<a href="https://www.npmjs.com/package/ionic-react-header-parallax
@@ -20,3 +20,64 @@
2020
<a href="https://david-dm.org/ahmnouira/ionic-react-header-parallax"><img src="https://david-dm.org/ahmnouira/ionic-react-header-parallax/status.svg"></a>
2121
<a href="https://david-dm.org/ahmnouira/ionic-react-header-parallax?type=dev"><img src="https://david-dm.org/ahmnouira/ionic-react-header-parallax/dev-status.svg"></a>
2222
</p>
23+
24+
# Installation with npm
25+
26+
```sh
27+
npm install ionic-react-header-parallax --save
28+
```
29+
30+
```sh
31+
yarn add ionic-react-header-parallax
32+
```
33+
34+
# Example
35+
36+
```tsx
37+
import * as React from 'react'
38+
import {
39+
IonBackButton,
40+
IonButton,
41+
IonButtons,
42+
IonContent,
43+
IonHeader,
44+
IonPage,
45+
IonTitle,
46+
IonToolbar,
47+
} from '@ionic/react'
48+
import { Lorem } from '../components/Lorem'
49+
import './Home.css'
50+
import { useIonHeaderParallax } from 'ionic-react-header-parallax'
51+
52+
const Home: React.FC = () => {
53+
54+
useIonHeaderParallax({ image: 'https://picsum.photos/1080' })
55+
56+
return (
57+
<IonPage>
58+
<IonHeader translucent>
59+
<IonToolbar mode="ios">
60+
<IonButtons slot="start">
61+
<IonBackButton defaultHref="/" />
62+
</IonButtons>
63+
<IonTitle>Post Details</IonTitle>
64+
<IonButtons slot="end">
65+
<IonButton>Button</IonButton>
66+
</IonButtons>
67+
</IonToolbar>
68+
</IonHeader>
69+
70+
<IonContent className="ion-padding">
71+
{...}
72+
</IonContent>
73+
</IonPage>
74+
)
75+
}
76+
77+
```
78+
79+
# API
80+
81+
- [useIonHeaderParallax](https://github.com/ahmnouira/hooks#ionic-react-header-parallax)
82+
83+
## `useIonHeaderParallax`

‎example/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
"@types/react-router": "5.1.16",
1616
"@types/react-router-dom": "5.1.8",
1717
"babel-jest": "^26.6.0",
18-
"ionic-react-header-parallax": "^0.0.8",
18+
"ionic-react-header-parallax": "^0.1.0",
1919
"ionicons": "5.5.3",
2020
"react": "17.0.2",
2121
"react-dom": "17.0.2",

‎example/yarn.lock

Lines changed: 5 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2696,7 +2696,7 @@ babel-extract-comments@^1.0.0:
26962696
dependencies:
26972697
babylon "^6.18.0"
26982698

2699-
babel-jest@26.6.3, babel-jest@^26.6.0, babel-jest@^26.6.3:
2699+
babel-jest@^26.6.0, babel-jest@^26.6.3:
27002700
version "26.6.3"
27012701
resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
27022702
integrity sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==
@@ -5934,10 +5934,10 @@ internal-slot@^1.0.3:
59345934
has "^1.0.3"
59355935
side-channel "^1.0.4"
59365936

5937-
ionic-react-header-parallax@^0.0.8:
5938-
version "0.0.8"
5939-
resolved "https://registry.yarnpkg.com/ionic-react-header-parallax/-/ionic-react-header-parallax-0.0.8.tgz#c19c33cb3f917accf4233cc3c4858038a74d0ae5"
5940-
integrity sha512-ZyZyOadXaZqgk7J9zy6YOZDYmW5yOmAh96WCUsE9Uxxhwxz6e2NKk9xBtDjeReoB32CXtNaoEGHFCpoRBzH8WA==
5937+
ionic-react-header-parallax@^0.1.0:
5938+
version "0.1.0"
5939+
resolved "https://registry.yarnpkg.com/ionic-react-header-parallax/-/ionic-react-header-parallax-0.1.0.tgz#d12edede7f0f2ef70eb283b0da3a416b766396d5"
5940+
integrity sha512-KiyCGeaBuVmDvQcQrWZvM6TNbaf5NOljsQXTzy/z/FwvtEiPJ/eV2gXSubaj8xnL0y76cU+KwnFJDUj9RtFOgA==
59415941

59425942
ionicons@5.5.3, ionicons@^5.1.2, ionicons@^5.5.3:
59435943
version "5.5.3"
@@ -6825,15 +6825,6 @@ jest@26.6.0:
68256825
import-local "^3.0.2"
68266826
jest-cli "^26.6.0"
68276827

6828-
jest@26.6.3:
6829-
version "26.6.3"
6830-
resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.3.tgz#40e8fdbe48f00dfa1f0ce8121ca74b88ac9148ef"
6831-
integrity sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==
6832-
dependencies:
6833-
"@jest/core" "^26.6.3"
6834-
import-local "^3.0.2"
6835-
jest-cli "^26.6.3"
6836-
68376828
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
68386829
version "4.0.0"
68396830
resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"

‎src/useIonicHeaderParallax.spec.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const Element: JSX.Element = (
3838

3939
describe('IonHeaderParallax', () => {
4040

41+
4142
beforeEach(() => {
4243
jest.useFakeTimers()
4344
})
@@ -51,9 +52,11 @@ describe('IonHeaderParallax', () => {
5152
expect(container).toBeTruthy()
5253
})
5354

55+
5456
// Running all pending timers and switching to real timers using Jest
5557
afterEach(() => {
5658
jest.runOnlyPendingTimers()
5759
jest.useRealTimers()
5860
})
61+
5962
})

‎src/useIonicHeaderParallax.ts

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,11 @@ export function useIonHeaderParallax({
3737
// ion-toolbar background
3838
const toolbarShadowRoot = toolbar.shadowRoot
3939

40-
// if (!toolbarShadowRoot) throw new Error('No shadow')
40+
if (!toolbarShadowRoot) return
4141

42-
const toolbarBackground = toolbarShadowRoot?.querySelector('.toolbar-background') as HTMLElement
42+
const toolbarBackground = toolbarShadowRoot.querySelector('.toolbar-background') as HTMLElement
4343

44-
// if (!toolbarBackground) throw new Error('No .toolbar-background')
44+
if (!toolbarBackground) return
4545

4646
// ion-title
4747
const ionTitle = toolbar.querySelector('ion-title') as HTMLElement
@@ -52,8 +52,12 @@ export function useIonHeaderParallax({
5252
// ion-content
5353
const ionContent = parentElement.querySelector('ion-content') as HTMLElement
5454
if (!ionContent) throw new Error('Parallax an <ion-content> element on the page to work.')
55+
5556
const scrollContent = ionContent.shadowRoot?.querySelector('.inner-scroll') as HTMLElement
5657

58+
if (!scrollContent) {
59+
throw new Error('Parallax directive requires an <ion-content> element on the page to work.')
60+
}
5761

5862
// create image overly
5963
const imageOverlay = document.createElement('div')

‎yarn.lock

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1466,7 +1466,12 @@
14661466
resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
14671467
integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
14681468

1469-
"@types/node@*", "@types/node@16.6.2":
1469+
"@types/node@*":
1470+
version "16.7.1"
1471+
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.7.1.tgz#c6b9198178da504dfca1fd0be9b2e1002f1586f0"
1472+
integrity sha512-ncRdc45SoYJ2H4eWU9ReDfp3vtFqDYhjOsKlFFUDEn8V1Bgr2RjYal8YT5byfadWIRluhPFU6JiDOl0H6Sl87A==
1473+
1474+
"@types/node@16.6.2":
14701475
version "16.6.2"
14711476
resolved "https://registry.yarnpkg.com/@types/node/-/node-16.6.2.tgz#331b7b9f8621c638284787c5559423822fdffc50"
14721477
integrity sha512-LSw8TZt12ZudbpHc6EkIyDM3nHVWKYrAvGy6EAJfNfjusbwnThqjqxUKKRwuV3iWYeW/LYMzNgaq3MaLffQ2xA==

0 commit comments

Comments
 (0)