Add new components to CRA for testing

Author: zeusdeux

examples/cra/src/index.js

@@ -12,6 +12,7 @@ import {
   altVisible,
   button
 } from './styles'
+import { RefForwardingElement } from './viewportParentDocument'
 
 function App() {
   const parentRef = React.useRef(null)
@@ -62,6 +63,22 @@ function App() {
   )
 }
 
+function App2() {
+  const forwardRef = React.useCallback(node => {
+    console.log('node ->', node)
+  })
+  const [showElement, toggleElement] = React.useState(true)
+
+  return (
+    <>
+      <button onClick={_ => toggleElement(v => !v)}>
+        {showElement ? 'Hide Element' : 'Show Element'}
+      </button>
+      {showElement ? <RefForwardingElement ref={forwardRef} threshold={75} /> : null}
+    </>
+  )
+}
+
 async function run() {
   if (!window.IntersectionObserver) {
     await import('intersection-observer')

examples/cra/src/onlyChildWithNullViewport.js

@@ -0,0 +1,75 @@
+import React from 'react'
+import { cx } from 'emotion'
+import useIsInViewport from './use-is-in-viewport'
+import { box, button, inWindowViewport, outsideWindowViewport, visible } from './styles'
+
+export function SimpleElement() {
+  const [isInViewport, childElToWatch] = useIsInViewport()
+  const [hide, toggleHide] = React.useState(false)
+
+  return (
+    <>
+      <button
+        className={button}
+        onClick={() => toggleHide(h => !h)}
+        data-testid="toggle-box-position"
+      >
+        {hide ? 'Show box' : 'Hide box'}
+      </button>
+      <div
+        className={cx(box, {
+          [inWindowViewport]: !hide,
+          [outsideWindowViewport]: hide,
+          [visible]: isInViewport
+        })}
+        data-testid="box"
+        ref={childElToWatch}
+      >
+        <p>{isInViewport ? 'In viewport' : 'Out of viewport'}</p>
+      </div>
+    </>
+  )
+}
+
+/**
+ * This component forwards a ref to the child element being watched for intersection
+ * with the viewport. Forwarding the ref to the child is not necessary. This is only
+ * an example to show that you useIsInViewport preserves origin ref behaviour (ref/cb ref)
+ * by returning a new wrapped ref to be passed to the child.
+ * If the ref wasn't meant for the child and instead for its container, then passing the
+ * forwarded ref as the `target` option isn't necessary.
+ */
+
+export const RefForwardingElement = React.forwardRef(function RefForwardingElement(
+  { threshold = 10 }, // default value for threshold so that we don't pass it in as undefined
+  ref
+) {
+  const [isInViewport, childRef] = useIsInViewport({
+    target: ref,
+    threshold // if threshold is passed as an option, it MUST be a number or number[]
+  })
+  const [hide, toggleHide] = React.useState(false)
+
+  return (
+    <>
+      <button
+        className={button}
+        onClick={() => toggleHide(h => !h)}
+        data-testid="toggle-box-position"
+      >
+        {hide ? 'Show box' : 'Hide box'}
+      </button>
+      <div
+        className={cx(box, {
+          [inWindowViewport]: !hide,
+          [outsideWindowViewport]: hide,
+          [visible]: isInViewport
+        })}
+        data-testid="box"
+        ref={childRef}
+      >
+        <p>{isInViewport ? 'In viewport' : 'Out of viewport'}</p>
+      </div>
+    </>
+  )
+})