feat: support skip option (#363)

Author: thebuilder

README.md

@@ -145,12 +145,13 @@ export default Component
 Provide these as props on the **`<InView />`** component and as the options
 argument for the hooks.
 
-| Name            | Type               | Default | Required | Description                                                                                                                                                    |
-| --------------- | ------------------ | ------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| **root**        | Element            | document  | false    | The IntersectionObserver interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is null, then the bounds of the actual document viewport are used.       |
-| **rootMargin**  | string             | '0px'   | false    | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).                             |
-| **threshold**   | number \| number[] | 0       | false    | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points. |
-| **triggerOnce** | boolean            | false   | false    | Only trigger this method once                                                                                                                                  |
+| Name            | Type               | Default  | Required | Description                                                                                                                                                                                                                                                                                 |
+| --------------- | ------------------ | -------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **root**        | Element            | document | false    | The IntersectionObserver interface's read-only root property identifies the Element or Document whose bounds are treated as the bounding box of the viewport for the element which is the observer's target. If the root is null, then the bounds of the actual document viewport are used. |
+| **rootMargin**  | string             | '0px'    | false    | Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).                                                                                                                                                          |
+| **threshold**   | number \| number[] | 0        | false    | Number between 0 and 1 indicating the percentage that should be visible before triggering. Can also be an array of numbers, to create multiple trigger points.                                                                                                                              |
+| **skip**        | boolean            | false    | false    | Skip creating the IntersectionObserver. You can use this to enable and disable the observer as needed. If `skip` is set while `inView`, the current state will still be kept.                                                                                                               |
+| **triggerOnce** | boolean            | false    | false    | Only trigger this method once.                                                                                                                                                                                                                                                              |
 
 > ⚠️ When passing an array to `threshold`, store the array in a constant to
 > avoid the component re-rendering too often. For example:

src/InView.tsx

@@ -74,7 +74,7 @@ export class InView extends React.Component<
   node: Element | null = null
 
   observeNode() {
-    if (!this.node) return
+    if (!this.node || this.props.skip) return
     const { threshold, root, rootMargin } = this.props
     observe(this.node, this.handleChange, {
       threshold,

src/__tests__/Observer.test.js

@@ -77,6 +77,12 @@ it('Should render <Observer /> render when in view', () => {
   getByText('Inview: true')
 })
 
+it('Should respect skip', () => {
+  render(<Observer skip>{plainChild}</Observer>)
+
+  expect(observe).not.toHaveBeenCalled()
+})
+
 it('Should unobserve old node', () => {
   const { rerender, container } = render(
     <Observer>

src/__tests__/hooks.test.js

@@ -67,6 +67,27 @@ test('should respect trigger once', () => {
   getByText('true')
 })
 
+test('should respect skip', () => {
+  const { getByText, rerender } = render(
+    <HookComponent options={{ skip: true }} />,
+  )
+  mockAllIsIntersecting(false)
+  getByText('false')
+
+  rerender(<HookComponent options={{ skip: false }} />)
+  mockAllIsIntersecting(true)
+  getByText('true')
+})
+
+test('should not reset current state if changing skip', () => {
+  const { getByText, rerender } = render(
+    <HookComponent options={{ skip: false }} />,
+  )
+  mockAllIsIntersecting(true)
+  rerender(<HookComponent options={{ skip: true }} />)
+  getByText('true')
+})
+
 test('should unmount the hook', () => {
   const { unmount, getByTestId } = render(<HookComponent />)
   const wrapper = getByTestId('wrapper')

src/index.tsx

@@ -30,6 +30,8 @@ interface RenderProps {
 export interface IntersectionOptions extends IntersectionObserverInit {
   /** Only trigger the inView callback once */
   triggerOnce?: boolean
+  /** Skip assigning the observer to the `ref` */
+  skip?: boolean
 }
 
 export interface IntersectionObserverProps extends IntersectionOptions {

src/stories/Hooks.story.tsx

@@ -124,3 +124,9 @@ export const triggerOnce = () => (
     <HookComponent options={{ triggerOnce: true }} />
   </ScrollWrapper>
 )
+
+export const skip = () => (
+  <ScrollWrapper>
+    <HookComponent options={{ skip: true }} />
+  </ScrollWrapper>
+)

src/useInView.tsx

@@ -26,6 +26,11 @@ export function useInView(
         unobserve(ref.current)
       }
 
+      if (options.skip) {
+        ref.current = undefined
+        return
+      }
+
       if (node) {
         observe(
           node,
@@ -40,16 +45,26 @@ export function useInView(
           options,
         )
       }
-
       // Store a reference to the node, so we can unobserve it later
       ref.current = node
     },
-    [options.threshold, options.root, options.rootMargin, options.triggerOnce],
+    [
+      options.threshold,
+      options.root,
+      options.rootMargin,
+      options.triggerOnce,
+      options.skip,
+    ],
   )
 
   useEffect(() => {
-    if (!ref.current && state !== initialState && !options.triggerOnce) {
-      // If we don't have a ref, then reset the state (unless the hook is set to only `triggerOnce`)
+    if (
+      !ref.current &&
+      state !== initialState &&
+      !options.triggerOnce &&
+      !options.skip
+    ) {
+      // If we don't have a ref, then reset the state (unless the hook is set to only `triggerOnce` or `skip`)
       // This ensures we correctly reflect the current state - If you aren't observing anything, then nothing is inView
       setState(initialState)
     }