Skip to content

Commit 7d8980a

Browse files
zeusdeuxzeusdeux
committed
Update example CRA to show usage
1 parent bfd0ff4 commit 7d8980a

File tree

5 files changed

+190
-79
lines changed

5 files changed

+190
-79
lines changed

‎examples/cra/src/index.js‎

Lines changed: 49 additions & 67 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,66 @@
1-
import { cx } from 'emotion'
21
import React from 'react'
32
import ReactDOM from 'react-dom'
4-
import useIsInViewport from './use-is-in-viewport'
3+
import { button, nav } from './styles'
54
import {
6-
container,
7-
growContainer,
8-
box,
9-
inWindowViewport,
10-
outsideWindowViewport,
11-
visible,
12-
altVisible,
13-
button
14-
} from './styles'
15-
// import { RefForwardingElement } from './viewportParentDocument'
5+
SimpleElement as DocViewportSimple,
6+
RefForwardingElement as DocViewportRefForwading
7+
} from './viewportParentDocument'
8+
import {
9+
SimpleElement as ParentElementViewportSimple,
10+
RefForwardingElement as ParentElementViewportRefForwading
11+
} from './viewportAnotherElement'
1612

1713
function App() {
18-
const parentRef = React.useRef(null)
19-
20-
const [isInViewport1, boxEl1, parentCbRef] = useIsInViewport({
21-
viewport: parentRef
22-
})
23-
const [isInViewport2, boxEl2] = useIsInViewport({
24-
threshold: [50]
25-
})
26-
const [isLarge, toggleContainerSize] = React.useState(false)
14+
const [testToShow, setTestToShow] = React.useState(1)
15+
const forwardedTargetRef = node => console.log('target', node)
16+
const forwardedViewportRef = node => console.log('viewport', node)
2717

2818
return (
2919
<>
30-
<button
31-
className={button}
32-
data-testid="toggle-container-size"
33-
onClick={() => toggleContainerSize(isLarge => !isLarge)}
34-
>
35-
{isLarge ? 'Shrink' : 'Grow'} container
36-
</button>
37-
<div
38-
className={cx(container, {
39-
[growContainer]: isLarge
40-
})}
41-
ref={parentCbRef}
42-
>
43-
<div
44-
className={cx(box, inWindowViewport, {
45-
[visible]: isInViewport1
46-
})}
47-
ref={boxEl1}
48-
data-testid="div-viewport-parent-el"
20+
<nav className={nav}>
21+
<button
22+
className={button}
23+
onClick={() => setTestToShow(v => ([0, 2, 3, 4].includes(v) ? 1 : 0))}
24+
data-testid="toggle-simple-parent-doc-test"
25+
>
26+
{testToShow !== 1 ? 'Show simple parent doc test' : 'Hide simple parent doc test'}
27+
</button>
28+
<button
29+
className={button}
30+
onClick={() => setTestToShow(v => ([0, 1, 3, 4].includes(v) ? 2 : 0))}
31+
data-testid="toggle-ref-forwarding-parent-doc-test"
4932
>
50-
<p>{isInViewport1 ? 'Intersecting with parent' : 'Not intersecting with parent'}</p>
51-
</div>
52-
<div
53-
className={cx(box, outsideWindowViewport, {
54-
[altVisible]: isInViewport2
55-
})}
56-
ref={boxEl2}
57-
data-testid="div-viewport-window"
33+
{testToShow !== 2 ? 'Show ref fwd parent doc test' : 'Hide ref fwd parent doc test'}
34+
</button>
35+
<button
36+
className={button}
37+
onClick={() => setTestToShow(v => ([0, 1, 2, 4].includes(v) ? 3 : 0))}
38+
data-testid="toggle-simple-parent-element-test"
5839
>
59-
<p>{isInViewport2 ? 'Visible' : 'Hidden'}</p>
60-
</div>
61-
</div>
40+
{testToShow !== 3 ? 'Show simple parent element test' : 'Hide simple parent element test'}
41+
</button>
42+
<button
43+
className={button}
44+
onClick={() => setTestToShow(v => ([0, 1, 2, 3].includes(v) ? 4 : 0))}
45+
data-testid="toggle-ref-forwarding-parent-element-test"
46+
>
47+
{testToShow !== 4
48+
? 'Show ref fwd parent element test'
49+
: 'Hide ref fwd parent element test'}
50+
</button>
51+
</nav>
52+
{testToShow !== 1 ? null : <DocViewportSimple />}
53+
{testToShow !== 2 ? null : (
54+
<DocViewportRefForwading threshold={50} ref={forwardedTargetRef} />
55+
)}
56+
{testToShow !== 3 ? null : <ParentElementViewportSimple />}
57+
{testToShow !== 4 ? null : (
58+
<ParentElementViewportRefForwading ref={forwardedViewportRef} threshold={75} />
59+
)}
6260
</>
6361
)
6462
}
6563

66-
// function App2() {
67-
// const forwardRef = React.useCallback(node => {
68-
// console.log('node ->', node)
69-
// })
70-
// const [showElement, toggleElement] = React.useState(true)
71-
72-
// return (
73-
// <>
74-
// <button onClick={_ => toggleElement(v => !v)}>
75-
// {showElement ? 'Hide Element' : 'Show Element'}
76-
// </button>
77-
// {showElement ? <RefForwardingElement ref={forwardRef} threshold={75} /> : null}
78-
// </>
79-
// )
80-
// }
81-
8264
async function run() {
8365
if (!window.IntersectionObserver) {
8466
await import('intersection-observer')

‎examples/cra/src/styles.js‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,24 @@
1-
import { css } from 'emotion'
1+
import { css, injectGlobal } from 'emotion'
22

3+
injectGlobal`
4+
:root {
5+
--offset: 0vh;
6+
}
7+
#root {
8+
display: flex;
9+
flex-direction: column;
10+
align-items: center;
11+
}
12+
`
13+
14+
export const nav = css`
15+
display: flex;
16+
height: 50px;
17+
padding: 10px 0;
18+
justify-content: center;
19+
width: 100%;
20+
box-sizing: border-box;
21+
`
322
export const container = css`
423
font-family: sans-serif;
524
text-align: center;
@@ -9,6 +28,8 @@ export const container = css`
928
display: flex;
1029
flex-wrap: wrap;
1130
justify-content: center;
31+
overflow: auto;
32+
width: 100%;
1233
`
1334

1435
export const growContainer = css`
@@ -28,6 +49,11 @@ export const box = css`
2849
box-sizing: border-box;
2950
`
3051

52+
export const offset = css`
53+
margin-left: 20px;
54+
--offset: 10vh;
55+
`
56+
3157
export const inWindowViewport = css`
3258
top: 55vh;
3359
`
@@ -36,6 +62,14 @@ export const outsideWindowViewport = css`
3662
top: 150vh;
3763
`
3864

65+
export const inContainerViewport = css`
66+
top: calc(var(--offset) + 20vh);
67+
`
68+
69+
export const outsideContainerViewport = css`
70+
top: calc(var(--offset) + 60vh);
71+
`
72+
3973
export const visible = css`
4074
background: pink;
4175
`

‎examples/cra/src/use-is-in-viewport.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/cra/src/viewportAnotherElement.js‎

Lines changed: 95 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,95 @@
1+
import React from 'react'
2+
import { cx } from 'emotion'
3+
import useIsInViewport from './use-is-in-viewport'
4+
import {
5+
altVisible,
6+
box,
7+
button,
8+
container,
9+
inContainerViewport,
10+
offset,
11+
outsideContainerViewport
12+
} from './styles'
13+
14+
export function SimpleElement() {
15+
const [isInViewport, targetRef, viewportRef] = useIsInViewport()
16+
const [hidden, toggleHide] = React.useState(false)
17+
18+
return (
19+
<>
20+
<button
21+
className={button}
22+
onClick={() => toggleHide(h => !h)}
23+
data-testid="toggle-box-position"
24+
>
25+
{hidden ? 'Show box' : 'Hide box'}
26+
</button>
27+
<div ref={viewportRef} data-testid="viewport" className={container}>
28+
<div
29+
ref={targetRef}
30+
data-testid="child"
31+
className={cx(box, {
32+
[inContainerViewport]: !hidden,
33+
[outsideContainerViewport]: hidden,
34+
[altVisible]: isInViewport
35+
})}
36+
>
37+
<p>{isInViewport ? 'In viewport' : 'Out of viewport'}</p>
38+
</div>
39+
</div>
40+
</>
41+
)
42+
}
43+
44+
export const RefForwardingElement = React.forwardRef(function RefForwardingElement(
45+
{ threshold = 0 },
46+
incomingParentRef
47+
) {
48+
const firstChildRef = React.useRef(null)
49+
const [isFirstInViewport, firstChildWrappedRef, chainedParentRef] = useIsInViewport({
50+
viewport: incomingParentRef,
51+
target: firstChildRef,
52+
threshold
53+
})
54+
const [isSecondInViewport, secondChildRef, finalParentRef] = useIsInViewport({
55+
viewport: chainedParentRef,
56+
threshold
57+
})
58+
const [hidden, toggleHide] = React.useState(false)
59+
60+
return (
61+
<>
62+
<button
63+
className={button}
64+
onClick={() => toggleHide(h => !h)}
65+
data-testid="toggle-boxes-positions"
66+
>
67+
{hidden ? 'Show boxes' : 'Hide boxes'}
68+
</button>
69+
<div ref={finalParentRef} data-testid="viewport" className={container}>
70+
<div
71+
ref={firstChildWrappedRef}
72+
data-testid="first-child"
73+
className={cx(box, {
74+
[inContainerViewport]: !hidden,
75+
[outsideContainerViewport]: hidden,
76+
[altVisible]: isFirstInViewport
77+
})}
78+
>
79+
<p>{isFirstInViewport ? 'First child in viewport' : 'First child out of viewport'}</p>
80+
</div>
81+
<div
82+
ref={secondChildRef}
83+
data-testid="second-child"
84+
className={cx(box, offset, {
85+
[inContainerViewport]: !hidden,
86+
[outsideContainerViewport]: hidden,
87+
[altVisible]: isSecondInViewport
88+
})}
89+
>
90+
<p>{isSecondInViewport ? 'Second child in viewport' : 'Second child out of viewport'}</p>
91+
</div>
92+
</div>
93+
</>
94+
)
95+
})

‎examples/cra/src/viewportParentDocument.js‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import useIsInViewport from './use-is-in-viewport'
44
import { box, button, inWindowViewport, outsideWindowViewport, visible } from './styles'
55

66
export function SimpleElement() {
7-
const [isInViewport, childElToWatch] = useIsInViewport()
8-
const [hide, toggleHide] = React.useState(false)
7+
const [isInViewport, childRef] = useIsInViewport()
8+
const [hidden, toggleHide] = React.useState(false)
99

1010
return (
1111
<>
@@ -14,16 +14,16 @@ export function SimpleElement() {
1414
onClick={() => toggleHide(h => !h)}
1515
data-testid="toggle-box-position"
1616
>
17-
{hide ? 'Show box' : 'Hide box'}
17+
{hidden ? 'Show box' : 'Hide box'}
1818
</button>
1919
<div
2020
className={cx(box, {
21-
[inWindowViewport]: !hide,
22-
[outsideWindowViewport]: hide,
21+
[inWindowViewport]: !hidden,
22+
[outsideWindowViewport]: hidden,
2323
[visible]: isInViewport
2424
})}
2525
data-testid="box"
26-
ref={childElToWatch}
26+
ref={childRef}
2727
>
2828
<p>{isInViewport ? 'In viewport' : 'Out of viewport'}</p>
2929
</div>
@@ -48,7 +48,7 @@ export const RefForwardingElement = React.forwardRef(function RefForwardingEleme
4848
target: ref,
4949
threshold // if threshold is passed as an option, it MUST be a number or number[]
5050
})
51-
const [hide, toggleHide] = React.useState(false)
51+
const [hidden, toggleHide] = React.useState(false)
5252

5353
return (
5454
<>
@@ -57,12 +57,12 @@ export const RefForwardingElement = React.forwardRef(function RefForwardingEleme
5757
onClick={() => toggleHide(h => !h)}
5858
data-testid="toggle-box-position"
5959
>
60-
{hide ? 'Show box' : 'Hide box'}
60+
{hidden ? 'Show box' : 'Hide box'}
6161
</button>
6262
<div
6363
className={cx(box, {
64-
[inWindowViewport]: !hide,
65-
[outsideWindowViewport]: hide,
64+
[inWindowViewport]: !hidden,
65+
[outsideWindowViewport]: hidden,
6666
[visible]: isInViewport
6767
})}
6868
data-testid="box"

0 commit comments

Comments
 (0)