fix: fixes

Author: ahmnouira

README.md

@@ -1,6 +1,6 @@
-<h4 align="center">
-    <b>Ionic React</b> libray to handle the parallax effect for <b>IonHeader</b> component
-</h4>
+<h1 align="center">
+    <b>Easy to use hook to handle the parallax effect for <b>IonHeader</b> component React Ionic.
+</h1>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/ionic-react-header-parallax
@@ -20,3 +20,64 @@
   <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>
   <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>
 </p>
+
+# Installation with npm
+
+```sh
+npm install ionic-react-header-parallax --save
+```
+
+```sh
+yarn add ionic-react-header-parallax
+```
+
+# Example
+
+```tsx
+import * as React from 'react'
+import {
+  IonBackButton,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonPage,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/react'
+import { Lorem } from '../components/Lorem'
+import './Home.css'
+import { useIonHeaderParallax } from 'ionic-react-header-parallax'
+
+const Home: React.FC = () => {
+
+  useIonHeaderParallax({ image: 'https://picsum.photos/1080' })
+
+  return (
+    <IonPage>
+      <IonHeader translucent>
+        <IonToolbar mode="ios">
+          <IonButtons slot="start">
+            <IonBackButton defaultHref="/" />
+          </IonButtons>
+          <IonTitle>Post Details</IonTitle>
+          <IonButtons slot="end">
+            <IonButton>Button</IonButton>
+          </IonButtons>
+        </IonToolbar>
+      </IonHeader>
+
+      <IonContent className="ion-padding">
+        {...}
+      </IonContent>
+    </IonPage>
+  )
+}
+
+```
+
+# API
+
+- [useIonHeaderParallax](https://github.com/ahmnouira/hooks#ionic-react-header-parallax)
+
+## `useIonHeaderParallax`

example/package.json

@@ -15,7 +15,7 @@
     "@types/react-router": "5.1.16",
     "@types/react-router-dom": "5.1.8",
     "babel-jest": "^26.6.0",
-    "ionic-react-header-parallax": "^0.0.8",
+    "ionic-react-header-parallax": "^0.1.0",
     "ionicons": "5.5.3",
     "react": "17.0.2",
     "react-dom": "17.0.2",

example/yarn.lock

@@ -2696,7 +2696,7 @@ babel-extract-comments@^1.0.0:
   dependencies:
     babylon "^6.18.0"
 
-babel-jest@26.6.3, babel-jest@^26.6.0, babel-jest@^26.6.3:
+babel-jest@^26.6.0, babel-jest@^26.6.3:
   version "26.6.3"
   resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-26.6.3.tgz#d87d25cb0037577a0c89f82e5755c5d293c01056"
   integrity sha512-pl4Q+GAVOHwvjrck6jKjvmGhnO3jHX/xuB9d27f+EJZ/6k+6nMuPjorrYp7s++bKKdANwzElBWnLWaObvTnaZA==
@@ -5934,10 +5934,10 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-ionic-react-header-parallax@^0.0.8:
-  version "0.0.8"
-  resolved "https://registry.yarnpkg.com/ionic-react-header-parallax/-/ionic-react-header-parallax-0.0.8.tgz#c19c33cb3f917accf4233cc3c4858038a74d0ae5"
-  integrity sha512-ZyZyOadXaZqgk7J9zy6YOZDYmW5yOmAh96WCUsE9Uxxhwxz6e2NKk9xBtDjeReoB32CXtNaoEGHFCpoRBzH8WA==
+ionic-react-header-parallax@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/ionic-react-header-parallax/-/ionic-react-header-parallax-0.1.0.tgz#d12edede7f0f2ef70eb283b0da3a416b766396d5"
+  integrity sha512-KiyCGeaBuVmDvQcQrWZvM6TNbaf5NOljsQXTzy/z/FwvtEiPJ/eV2gXSubaj8xnL0y76cU+KwnFJDUj9RtFOgA==
 
 ionicons@5.5.3, ionicons@^5.1.2, ionicons@^5.5.3:
   version "5.5.3"
@@ -6825,15 +6825,6 @@ jest@26.6.0:
     import-local "^3.0.2"
     jest-cli "^26.6.0"
 
-jest@26.6.3:
-  version "26.6.3"
-  resolved "https://registry.yarnpkg.com/jest/-/jest-26.6.3.tgz#40e8fdbe48f00dfa1f0ce8121ca74b88ac9148ef"
-  integrity sha512-lGS5PXGAzR4RF7V5+XObhqz2KZIDUA1yD0DG6pBVmy10eh0ZIXQImRuzocsI/N2XZ1GrLFwTS27In2i2jlpq1Q==
-  dependencies:
-    "@jest/core" "^26.6.3"
-    import-local "^3.0.2"
-    jest-cli "^26.6.3"
-
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"

src/useIonicHeaderParallax.spec.tsx

@@ -38,6 +38,7 @@ const Element: JSX.Element = (
 
 describe('IonHeaderParallax', () => {
 
+  
   beforeEach(() => {
     jest.useFakeTimers()
   })
@@ -51,9 +52,11 @@ describe('IonHeaderParallax', () => {
     expect(container).toBeTruthy()
   })
 
+  
   // Running all pending timers and switching to real timers using Jest
   afterEach(() => {
     jest.runOnlyPendingTimers()
     jest.useRealTimers()
   })
+  
 })

src/useIonicHeaderParallax.ts

@@ -37,11 +37,11 @@ export function useIonHeaderParallax({
     // ion-toolbar background
     const toolbarShadowRoot = toolbar.shadowRoot
 
-    // if (!toolbarShadowRoot) throw new Error('No shadow')
+    if (!toolbarShadowRoot) return
 
-    const toolbarBackground = toolbarShadowRoot?.querySelector('.toolbar-background') as HTMLElement
+    const toolbarBackground = toolbarShadowRoot.querySelector('.toolbar-background') as HTMLElement
 
-    // if (!toolbarBackground) throw new Error('No .toolbar-background')
+    if (!toolbarBackground) return
 
     // ion-title
     const ionTitle = toolbar.querySelector('ion-title') as HTMLElement
@@ -52,8 +52,12 @@ export function useIonHeaderParallax({
     // ion-content
     const ionContent = parentElement.querySelector('ion-content') as HTMLElement
     if (!ionContent) throw new Error('Parallax an <ion-content> element on the page to work.')
+
     const scrollContent = ionContent.shadowRoot?.querySelector('.inner-scroll') as HTMLElement
 
+    if (!scrollContent) {
+      throw new Error('Parallax directive requires an <ion-content> element on the page to work.')
+    }
 
     // create image overly
     const imageOverlay = document.createElement('div')

yarn.lock

@@ -1466,7 +1466,12 @@
   resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.2.tgz#ee771e2ba4b3dc5b372935d549fd9617bf345b8c"
   integrity sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==
 
-"@types/node@*", "@types/node@16.6.2":
+"@types/node@*":
+  version "16.7.1"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-16.7.1.tgz#c6b9198178da504dfca1fd0be9b2e1002f1586f0"
+  integrity sha512-ncRdc45SoYJ2H4eWU9ReDfp3vtFqDYhjOsKlFFUDEn8V1Bgr2RjYal8YT5byfadWIRluhPFU6JiDOl0H6Sl87A==
+
+"@types/node@16.6.2":
   version "16.6.2"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.6.2.tgz#331b7b9f8621c638284787c5559423822fdffc50"
   integrity sha512-LSw8TZt12ZudbpHc6EkIyDM3nHVWKYrAvGy6EAJfNfjusbwnThqjqxUKKRwuV3iWYeW/LYMzNgaq3MaLffQ2xA==