Improve the example

Author: zeusdeux

examples/cra/src/styles.js

@@ -11,14 +11,32 @@ injectGlobal`
   }
 `
 
+export const button = css`
+  height: 30px;
+  width: 100%;
+`
+
+export const app = css`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  & > button {
+    position: fixed;
+    margin-top: 51px;
+  }
+`
+
 export const nav = css`
   display: flex;
   height: 50px;
   padding: 10px 0;
   justify-content: center;
   width: 100%;
   box-sizing: border-box;
+  position: fixed;
 `
+
 export const container = css`
   font-family: sans-serif;
   text-align: center;
@@ -30,6 +48,7 @@ export const container = css`
   justify-content: center;
   overflow: auto;
   width: 100%;
+  margin-top: 94px;
 `
 
 export const growContainer = css`
@@ -78,8 +97,3 @@ export const altVisible = css`
   background: orange;
   color: black;
 `
-
-export const button = css`
-  height: 30px;
-  width: 100%;
-`

examples/cra/src/viewportAnotherElement.js

@@ -3,6 +3,7 @@ import { cx } from 'emotion'
 import useIsInViewport from './use-is-in-viewport'
 import {
   altVisible,
+  app,
   box,
   button,
   container,
@@ -16,7 +17,7 @@ export function SimpleElement() {
   const [hidden, toggleHide] = React.useState(false)
 
   return (
-    <>
+    <div className={app}>
       <button
         className={button}
         onClick={() => toggleHide(h => !h)}
@@ -37,7 +38,7 @@ export function SimpleElement() {
           <p>{isInViewport ? 'In viewport' : 'Out of viewport'}</p>
         </div>
       </div>
-    </>
+    </div>
   )
 }
 
@@ -58,7 +59,7 @@ export const RefForwardingElement = React.forwardRef(function RefForwardingEleme
   const [hidden, toggleHide] = React.useState(false)
 
   return (
-    <>
+    <div className={app}>
       <button
         className={button}
         onClick={() => toggleHide(h => !h)}
@@ -76,7 +77,9 @@ export const RefForwardingElement = React.forwardRef(function RefForwardingEleme
             [altVisible]: isFirstInViewport
           })}
         >
-          <p>{isFirstInViewport ? 'First child in viewport' : 'First child out of viewport'}</p>
+          <p>
+            {isFirstInViewport ? 'First child >= 75% in viewport' : 'First child out of viewport'}
+          </p>
         </div>
         <div
           ref={secondChildRef}
@@ -87,9 +90,13 @@ export const RefForwardingElement = React.forwardRef(function RefForwardingEleme
             [altVisible]: isSecondInViewport
           })}
         >
-          <p>{isSecondInViewport ? 'Second child in viewport' : 'Second child out of viewport'}</p>
+          <p>
+            {isSecondInViewport
+              ? 'Second child >= 75% in viewport'
+              : 'Second child out of viewport'}
+          </p>
         </div>
       </div>
-    </>
+    </div>
   )
 })

examples/cra/src/viewportParentDocument.js

@@ -1,14 +1,14 @@
 import React from 'react'
 import { cx } from 'emotion'
 import useIsInViewport from './use-is-in-viewport'
-import { box, button, inWindowViewport, outsideWindowViewport, visible } from './styles'
+import { app, box, button, inWindowViewport, outsideWindowViewport, visible } from './styles'
 
 export function SimpleElement() {
   const [isInViewport, childRef] = useIsInViewport()
   const [hidden, toggleHide] = React.useState(false)
 
   return (
-    <>
+    <div className={app}>
       <button
         className={button}
         onClick={() => toggleHide(h => !h)}
@@ -27,7 +27,7 @@ export function SimpleElement() {
       >
         <p>{isInViewport ? 'In viewport' : 'Out of viewport'}</p>
       </div>
-    </>
+    </div>
   )
 }
 
@@ -51,7 +51,7 @@ export const RefForwardingElement = React.forwardRef(function RefForwardingEleme
   const [hidden, toggleHide] = React.useState(false)
 
   return (
-    <>
+    <div className={app}>
       <button
         className={button}
         onClick={() => toggleHide(h => !h)}
@@ -70,6 +70,6 @@ export const RefForwardingElement = React.forwardRef(function RefForwardingEleme
       >
         <p>{isInViewport ? 'In viewport' : 'Out of viewport'}</p>
       </div>
-    </>
+    </div>
   )
 })