Merge pull request #144 from hiroki0525/feat-add-hook

feat: add `useLazyLoad` hook

README.md

@@ -16,20 +16,15 @@ Lazyload your Components, Images or anything else. You can improve performance s
 
 ```
 npm i react-dom-lazyload-component
-```
-
-or
-
-```
 yarn add react-dom-lazyload-component
+pnpm add react-dom-lazyload-component
 ```
 
 ## Usage
 
 ```jsx
 import { lazy } from 'react';
-import { createRoot } from 'react-dom/client';
-import LazyLoad from 'react-dom-lazyload-component';
+import LazyLoad, { useLazyLoad } from 'react-dom-lazyload-component';
 import { Header, Main, Loading } from './MyComponents';
 
 const Footer = React.lazy(() => import('./Footer'))
@@ -51,24 +46,44 @@ const App = () => (
     </>
 )
 
-const root = createRoot(document.getElementById('root'));
-root.render(<App />);
+// You can also use hooks.
+const App = () => {
+    const { ref, isVisible } = useLazyLoad();
+
+    return (
+        <>
+            <Header />
+            <Main />
+            <footer ref={ref}>{isVisible ? 'footer' : <Loading />}</footer>
+        </>
+    )
+}
 ```
 
 ### Props
 
-#### LazyLoad
+#### useLazyLoad
 
 | Name         | Required | Type                           | Default    | Description                                                                                                                                                                                                                                                                                         |
 |--------------|----------|--------------------------------|------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| children     | Yes      | ReactNode                      | -          | Component is rendered when it is in the viewport. Automatically enable `React.Suspense` if you use `React.lazy` .                                                                                                                                                                                   |
-| fallback     | No       | ReactNode                      | -          | Component is rendered when it is not in the viewport.                                                                                                                                                                                                                                               |
 | rootId       | No       | string                         | -          | The id of element which is `IntersectionObserver`'s target. If `rootId` is not specified, then the bounds of the actual document viewport are used. This prop wraps [IntersectionObserver.root](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root) because of performance. |
 | direction    | No       | 'vertical' &#124; 'horizontal' | 'vertical' | Direction which user will scroll.                                                                                                                                                                                                                                                                   |
 | margin       | No       | string                         | '0px'      | Margin around the root element. For examples, if `direction` is `vertical` and `margin` is `200px`, [IntersectionObserver.thresholds](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds) is `200px 0px`.                                                             |
 | forceVisible | No       | boolean                        | false      | You can forces the component to display regardless of whether the element is visible in the viewport.                                                                                                                                                                                               |
 | once         | No       | boolean                        | true       | You can control whether the element in the viewport is shown at once or not.                                                                                                                                                                                                                        |
 | onVisible    | No       | () => void                     | -          | Callback function called when the component has been visible.                                                                                                                                                                                                                                       |
+
+The return value is `ref` and `isVisible`.
+You can use `ref` to attach to the element you want to observe, and `isVisible` to determine if the element is visible in the viewport.
+
+#### LazyLoad
+
+You can specify the following props in addition to the `useLazyLoad` props.
+
+| Name         | Required | Type                           | Default    | Description                                                                                                                                                                                                                                                                                         |
+|--------------|----------|--------------------------------|------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| children     | Yes      | ReactNode                      | -          | Component is rendered when it is in the viewport. Automatically enable `React.Suspense` if you use `React.lazy` .                                                                                                                                                                                   |
+| fallback     | No       | ReactNode                      | -          | Component is rendered when it is not in the viewport.                                                                                                                                                                                                                                               |
 | as           | No       | string                         | div        | You can specify tag name to `LazyLoad` component.                                                                                                                                                                                                                                                   |
 | suspense     | No       | boolean                        | false      | You can use `React.Suspense` .                                                                                                                                                                                                                                                                      |
 

package.json

@@ -126,5 +126,5 @@
       }
     ]
   },
-  "packageManager": "pnpm@8.15.7"
+  "packageManager": "pnpm@9.0.6"
 }