Skip to content

Commit 4cb6437

Browse files
compulimcompulim
authored
Clean up docs and StateContext.js (#60)
* Clean up * Add advanced sample * Rename
1 parent 0927ec7 commit 4cb6437

File tree

5 files changed

+512
-22
lines changed

5 files changed

+512
-22
lines changed

‎README.md

Lines changed: 63 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -99,12 +99,24 @@ You can use React Hooks to perform various operations and signal state changes.
9999
<td><code>() => () => void</code></td>
100100
<td>Scroll panel to top</td>
101101
</tr>
102+
<tr>
103+
<td>Observer</td>
104+
<td><code>useObserveScrollPosition</code></td>
105+
<td><code>(observer: (({ scrollTop: number }) => void) | false) => void</code></td>
106+
<td>Observe scroll position change by passing a callback function</td>
107+
</tr>
102108
<tr>
103109
<td>State</td>
104110
<td><code>useAnimating</code></td>
105111
<td><code>() => [boolean]</code></td>
106112
<td><code>true</code> if the panel is animating scroll effect</td>
107113
</tr>
114+
<tr>
115+
<td>State</td>
116+
<td><code>useAnimatingToEnd</code></td>
117+
<td><code>boolean</code></td>
118+
<td><code>true</code> if the panel is animating scroll effect and towards the end (depends on <code>mode</code>)</td>
119+
</tr>
108120
<tr>
109121
<td>State</td>
110122
<td><code>useAtBottom</code></td>
@@ -144,6 +156,8 @@ You can use React Hooks to perform various operations and signal state changes.
144156
</tbody>
145157
</table>
146158

159+
> Callback function passed to `useObserveScrollPosition` will be called rapidly during scrolling. To unsubscribe, pass a falsy value.
160+
147161
### Sample code
148162

149163
The following sample code will put a button inside the content view only if the view is not at the bottom. When the button is clicked, it will scroll the view to the bottom.
@@ -162,7 +176,7 @@ const Content = () => {
162176
<p>Labore commodo consectetur commodo et Lorem mollit voluptate velit adipisicing proident sit. Dolor consequat nostrud aliquip ea anim enim. Culpa quis tempor et quis esse proident cupidatat reprehenderit laborum ullamco.</p>
163177
<p>Incididunt labore nulla cupidatat occaecat elit esse occaecat culpa irure et nisi excepteur. Duis Lorem labore consectetur nostrud et voluptate culpa consequat enim reprehenderit. Id voluptate occaecat anim consequat id ea eiusmod laborum proident irure veniam esse. Aliquip nostrud culpa nostrud laborum cillum adipisicing dolore. Est tempor labore Lorem ad cupidatat reprehenderit exercitation pariatur officia ex adipisicing cupidatat exercitation.</p>
164178
<p>Est labore cupidatat exercitation est laboris et tempor Lorem irure velit ea commodo sint officia. Ullamco exercitation cillum est fugiat do. Enim qui eu veniam nostrud tempor elit. Duis elit mollit ut reprehenderit sit adipisicing proident culpa veniam sint veniam consectetur fugiat Lorem. Sint dolor proident commodo proident non cupidatat labore.</p>
165-
{ !sticky && <button onClick={ scrollToBottom }>Click me to scroll to bottom</button> }
179+
{!sticky && <button onClick={scrollToBottom}>Click me to scroll to bottom</button>}
166180
</React.Fragment>
167181
);
168182
}
@@ -176,7 +190,7 @@ export default () => (
176190

177191
## Context
178192

179-
> Starting with React Hooks, we are deprecating the React Context.
193+
> Starting with React Hooks, we are deprecating the React Context. New functions may not be added to context.
180194
181195
We use 2 different contexts with different performance characteristics to provide better overall performance. [Function context](#function-context) contains immutable functions. [State context](#state-context) may change when the user scroll the panel.
182196

@@ -194,40 +208,33 @@ This context contains functions used to manipulate the container. And will not u
194208
</thead>
195209
<tbody>
196210
<tr>
197-
<td><code>useObserveScrollPosition</code></td>
198-
<td><code>(observer: (({ scrollTop: number }) => void) | false) => void</code></td>
199-
<td>Observe scroll position change by passing a callback function</td>
200-
</tr>
201-
<tr>
202-
<td><code>useScrollTo</code></td>
211+
<td><code>scrollTo</code></td>
203212
<td><code>(scrollTop: number | '100%') => void</code></td>
204213
<td>Scroll panel to specified position</td>
205214
</tr>
206215
<tr>
207-
<td><code>useScrollToBottom</code></td>
216+
<td><code>scrollToBottom</code></td>
208217
<td><code>() => void</code></td>
209218
<td>Scroll panel to bottom</td>
210219
</tr>
211220
<tr>
212-
<td><code>useScrollToEnd</code></td>
221+
<td><code>scrollToEnd</code></td>
213222
<td><code>() => void</code></td>
214223
<td>Scroll panel to end (depends on <code>mode</code>)</td>
215224
</tr>
216225
<tr>
217-
<td><code>useScrollToStart</code></td>
226+
<td><code>scrollToStart</code></td>
218227
<td><code>() => void</code></td>
219228
<td>Scroll panel to start (depends on <code>mode</code>)</td>
220229
</tr>
221230
<tr>
222-
<td><code>useScrollToTop</code></td>
231+
<td><code>scrollToTop</code></td>
223232
<td><code>() => void</code></td>
224233
<td>Scroll panel to top</td>
225234
</tr>
226235
</tbody>
227236
</table>
228237

229-
> Callback function passed to `useObserveScrollPosition` will be called rapidly during scrolling. To unsubscribe, pass a falsy value.
230-
231238
### State context
232239

233240
This context contains state of the container.
@@ -242,42 +249,42 @@ This context contains state of the container.
242249
</thead>
243250
<tbody>
244251
<tr>
245-
<td><code>useAnimating</code></td>
252+
<td><code>animating</code></td>
246253
<td><code>boolean</code></td>
247254
<td><code>true</code> if the panel is animating scroll effect</td>
248255
</tr>
249256
<tr>
250-
<td><code>useAnimatingToEnd</code></td>
257+
<td><code>animatingToEnd</code></td>
251258
<td><code>boolean</code></td>
252259
<td><code>true</code> if the panel is animating scroll effect and towards the end (depends on <code>mode</code>)</td>
253260
</tr>
254261
<tr>
255-
<td><code>useAtBottom</code></td>
262+
<td><code>atBottom</code></td>
256263
<td><code>boolean</code></td>
257264
<td><code>true</code> if the panel is currently near bottom</td>
258265
</tr>
259266
<tr>
260-
<td><code>useAtEnd</code></td>
267+
<td><code>atEnd</code></td>
261268
<td><code>boolean</code></td>
262269
<td><code>true</code> if the panel is currently near the end (depends on <code>mode</code>)</td>
263270
</tr>
264271
<tr>
265-
<td><code>useAtStart</code></td>
272+
<td><code>atStart</code></td>
266273
<td><code>boolean</code></td>
267274
<td><code>true</code> if the panel is currently near the start (depends on <code>mode</code>)</td>
268275
</tr>
269276
<tr>
270-
<td><code>useAtTop</code></td>
277+
<td><code>atTop</code></td>
271278
<td><code>boolean</code></td>
272279
<td><code>true</code> if the panel is currently near top</td>
273280
</tr>
274281
<tr>
275-
<td><code>useMode</code></td>
282+
<td><code>mode</code></td>
276283
<td><code>string</code></td>
277284
<td><code>"bottom"</code> for scroll-to-bottom, <code>"top"</code> for scroll-to-top</td>
278285
</tr>
279286
<tr>
280-
<td><code>useSticky</code></td>
287+
<td><code>sticky</code></td>
281288
<td><code>boolean</code></td>
282289
<td><code>true</code> if the panel is sticking to the end</td>
283290
</tr>
@@ -286,10 +293,44 @@ This context contains state of the container.
286293

287294
> `atEnd` and `sticky` are slightly different. During scroll animation, the panel is not at the end yet, but it is still sticky.
288295
296+
### Sample code
297+
298+
The following sample code will put a button inside the content view only if the view is not at the bottom. When the button is clicked, it will scroll the view to the bottom.
299+
300+
```jsx
301+
import ScrollToBottom from 'react-scroll-to-bottom';
302+
303+
const Content = ({ scrollToBottom, sticky }) => {
304+
return (
305+
<React.Fragment>
306+
<p>Labore commodo consectetur commodo et Lorem mollit voluptate velit adipisicing proident sit. Dolor consequat nostrud aliquip ea anim enim. Culpa quis tempor et quis esse proident cupidatat reprehenderit laborum ullamco.</p>
307+
<p>Incididunt labore nulla cupidatat occaecat elit esse occaecat culpa irure et nisi excepteur. Duis Lorem labore consectetur nostrud et voluptate culpa consequat enim reprehenderit. Id voluptate occaecat anim consequat id ea eiusmod laborum proident irure veniam esse. Aliquip nostrud culpa nostrud laborum cillum adipisicing dolore. Est tempor labore Lorem ad cupidatat reprehenderit exercitation pariatur officia ex adipisicing cupidatat exercitation.</p>
308+
<p>Est labore cupidatat exercitation est laboris et tempor Lorem irure velit ea commodo sint officia. Ullamco exercitation cillum est fugiat do. Enim qui eu veniam nostrud tempor elit. Duis elit mollit ut reprehenderit sit adipisicing proident culpa veniam sint veniam consectetur fugiat Lorem. Sint dolor proident commodo proident non cupidatat labore.</p>
309+
{!sticky && <button onClick={scrollToBottom}>Click me to scroll to bottom</button>}
310+
</React.Fragment>
311+
);
312+
}
313+
314+
export default () => (
315+
<ScrollToBottom>
316+
<FunctionContext.Consumer>
317+
{({ scrollToBottom }) =>
318+
<StateContext.Consumer>
319+
{({ sticky }) =>
320+
<Content scrollToBottom={scrollToBottom} sticky={sticky} />
321+
}
322+
</StateContext.Consumer>
323+
}
324+
</FunctionContext.Consumer>
325+
</ScrollToBottom>
326+
)
327+
```
328+
289329
# Road map
290330

291331
- [x] Easier customization for "scroll to bottom" button
292332
- [ ] Debounce on showing "scroll to bottom" button
333+
- [ ] Investigate using [`scroll`](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll) for scrolling and polyfill IE11
293334

294335
# Contributions
295336

‎packages/component/.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,3 @@
1+
/dist
12
/lib
23
/node_modules

‎packages/component/src/ScrollToBottom/StateContext.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,10 @@ import React from 'react';
22

33
const context = React.createContext({
44
animating: false,
5+
animatingToEnd: false,
56
atBottom: true,
67
atEnd: true,
8+
atStart: false,
79
atTop: true,
810
mode: 'bottom',
911
sticky: true

‎samples/context.html

Lines changed: 175 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,175 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
<head>
4+
<title>Using react-scroll-to-bottom via UMD</title>
5+
<script crossorigin="anonymous" src="https://unpkg.com/@babel/standalone@7.8.7/babel.min.js"></script>
6+
<script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.development.js"></script>
7+
<script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.development.js"></script>
8+
<script src="/react-scroll-to-bottom.development.js"></script>
9+
<style type="text/css">
10+
body,
11+
html,
12+
#app,
13+
.scroll-to-bottom {
14+
height: 100%;
15+
}
16+
17+
body {
18+
margin: 0;
19+
}
20+
21+
.scroll-to-bottom-button {
22+
position: fixed;
23+
bottom: 0;
24+
right: 0;
25+
}
26+
</style>
27+
</head>
28+
<body>
29+
<div id="app"></div>
30+
<script type="text/babel">
31+
const {
32+
ReactDOM: { render },
33+
ReactScrollToBottom,
34+
ReactScrollToBottom: { FunctionContext, StateContext }
35+
} = window;
36+
37+
const Content = ({ scrollToBottom, sticky }) => {
38+
return (
39+
<React.Fragment>
40+
<p>
41+
Aliqua ex ipsum nostrud commodo amet amet eu laborum mollit labore. Aliqua magna excepteur proident magna
42+
proident duis laborum reprehenderit excepteur. Pariatur esse laborum veniam ex quis excepteur esse elit.
43+
Elit aute id tempor velit velit.
44+
</p>
45+
<p>
46+
Id duis sunt consequat veniam culpa eiusmod ea id consequat amet qui minim. Aliqua tempor adipisicing
47+
ullamco ut dolor nisi non mollit reprehenderit nostrud exercitation. Cupidatat ipsum reprehenderit
48+
deserunt irure Lorem deserunt ea in deserunt mollit exercitation nulla. Laboris mollit aliqua Lorem nisi
49+
id tempor in proident sunt aute in. Voluptate cupidatat aliquip officia mollit culpa laboris Lorem ad
50+
cupidatat. Labore non mollit magna proident tempor et. Sunt deserunt incididunt labore officia elit dolor
51+
aliquip.
52+
</p>
53+
<p>
54+
Qui cillum mollit consequat labore. Sint excepteur est sint quis eiusmod ullamco veniam. Ea do eiusmod
55+
voluptate pariatur voluptate nisi incididunt ad nulla excepteur quis cillum velit adipisicing. Magna
56+
consectetur aute aliquip incididunt tempor do. Nisi aliquip incididunt id do qui dolor eiusmod do. Laboris
57+
aute id elit esse. Veniam cupidatat est esse nostrud consectetur ex aliquip aliqua incididunt anim eiusmod
58+
dolor Lorem officia.
59+
</p>
60+
<p>
61+
Sunt mollit nisi eiusmod reprehenderit culpa enim laboris officia cillum sunt. Adipisicing commodo
62+
consectetur duis amet voluptate esse do amet aliqua cillum cillum labore. Aliqua laborum eu adipisicing
63+
laborum dolore laboris cupidatat ut deserunt quis exercitation eiusmod. Cupidatat aliqua quis id culpa.
64+
</p>
65+
<p>
66+
Pariatur incididunt do incididunt enim est sint. Sit duis Lorem nisi eu consectetur exercitation. Esse
67+
tempor non reprehenderit mollit incididunt sint minim irure do cillum consequat do commodo. Lorem tempor
68+
ullamco nulla anim occaecat proident ullamco consectetur dolor pariatur.
69+
</p>
70+
<p>
71+
Consectetur reprehenderit ut commodo est esse aute ea anim commodo officia exercitation velit commodo
72+
mollit. Duis ea voluptate ad irure exercitation ad ea id veniam adipisicing sunt. Ex fugiat aliquip
73+
exercitation aliqua. Ea commodo consectetur ut excepteur deserunt commodo exercitation deserunt. Occaecat
74+
in adipisicing elit sit id incididunt nostrud. Consequat ut ex enim ea ad commodo aliquip officia sint
75+
nostrud laboris nostrud.
76+
</p>
77+
<p>
78+
Culpa dolor cillum ea ut labore id. Enim sint et qui et mollit laborum velit ut. Mollit aliquip magna
79+
mollit proident qui elit. Amet qui ex occaecat eiusmod ut.
80+
</p>
81+
<p>
82+
Ea non qui amet ullamco consequat veniam deserunt velit culpa nisi ad aliqua duis. Ut duis ad proident
83+
minim aliquip aliqua aliqua proident sunt. Voluptate officia amet sunt quis veniam duis excepteur amet
84+
amet eiusmod non. Amet voluptate minim labore aliquip esse. Voluptate cupidatat pariatur nisi exercitation
85+
sunt labore amet.
86+
</p>
87+
<p>
88+
Nulla voluptate veniam proident commodo aliquip voluptate est fugiat quis anim eiusmod Lorem amet. Aliqua
89+
cupidatat elit eu velit mollit non consectetur eu aliqua nisi do nisi ea. Ut officia incididunt cupidatat
90+
elit et id ut. Ad voluptate quis enim laboris culpa amet.
91+
</p>
92+
<p>
93+
Officia mollit occaecat ullamco exercitation reprehenderit voluptate anim aute ullamco deserunt.
94+
Exercitation aliquip consequat enim duis nisi. Veniam nostrud consequat nostrud elit nostrud irure veniam
95+
in mollit commodo dolor veniam. Nulla cillum aute ut magna est quis adipisicing.
96+
</p>
97+
<p>
98+
Nostrud laboris proident aliquip do esse nisi eiusmod velit eiusmod commodo aliquip sunt. Esse ea
99+
consectetur tempor aliqua est ea id aliquip ullamco ex sunt. Anim eiusmod eiusmod amet fugiat laboris
100+
deserunt cupidatat ut cillum Lorem non quis aute proident. Voluptate non ut minim fugiat proident et
101+
nostrud minim cillum labore.
102+
</p>
103+
<p>
104+
Lorem sit elit aute eu Lorem elit sint. Occaecat proident mollit mollit qui id incididunt cillum nulla
105+
officia incididunt. Quis dolor commodo esse in sit. Qui est adipisicing irure anim voluptate incididunt ex
106+
sunt enim proident non proident est sit. Voluptate Lorem esse labore non pariatur commodo exercitation
107+
dolore ex amet. Mollit cupidatat labore eiusmod non veniam amet commodo eiusmod occaecat amet.
108+
</p>
109+
<p>
110+
Lorem cillum sint amet et qui ex anim duis Lorem. Nulla laborum laborum voluptate do duis irure. Amet
111+
fugiat irure velit labore et enim irure ipsum minim sint ut. Aliqua aute occaecat ullamco Lorem proident
112+
labore ullamco tempor Lorem in aliquip nisi sit officia. Ut quis nulla est ea ullamco cupidatat dolor
113+
excepteur. Irure sint culpa magna aliquip do do ipsum nulla officia et occaecat non cillum nisi.
114+
</p>
115+
<p>
116+
Cillum ea officia quis ipsum pariatur. Nisi duis aute voluptate ad. Minim incididunt tempor laborum Lorem
117+
elit. Ut commodo anim tempor nulla minim sint ut.
118+
</p>
119+
<p>
120+
Mollit esse ea ullamco cupidatat laborum quis. Lorem nostrud aute sint anim reprehenderit ea. Mollit ut
121+
est veniam consequat eiusmod veniam deserunt non cillum pariatur. Commodo qui pariatur proident laborum ad
122+
officia ullamco reprehenderit cillum quis sint veniam labore.
123+
</p>
124+
<p>
125+
Fugiat commodo enim proident voluptate nostrud adipisicing reprehenderit duis minim aliquip excepteur.
126+
Fugiat pariatur pariatur tempor aliqua in magna tempor ad. Do quis quis non veniam dolore excepteur in
127+
irure id exercitation tempor sit ad. Exercitation in amet velit duis ipsum tempor ad est labore labore
128+
veniam ex. Ullamco enim consequat elit duis labore reprehenderit tempor dolor est elit eu ea veniam magna.
129+
Veniam ipsum minim et labore commodo do elit Lorem laborum ullamco velit aliquip.
130+
</p>
131+
<p>
132+
Pariatur fugiat officia ut mollit quis mollit proident esse ipsum. Culpa laborum labore ea commodo cillum
133+
excepteur sunt ullamco exercitation. Ullamco consequat officia enim ex duis eiusmod in ipsum est dolor
134+
eiusmod aliqua voluptate in. Veniam nisi ullamco qui non duis irure nisi pariatur. Et enim sint eu non
135+
nulla do veniam qui cupidatat amet sint esse Lorem commodo. Culpa nostrud qui ut dolor quis nisi labore
136+
aliqua mollit.
137+
</p>
138+
<p>
139+
Aute non minim consequat in culpa occaecat veniam tempor esse cillum duis officia cillum irure. Velit
140+
minim commodo adipisicing minim. Qui quis irure et consectetur esse consectetur nostrud magna officia
141+
ullamco elit. Dolore est esse velit minim fugiat.
142+
</p>
143+
<p>
144+
Consequat ut cillum id in commodo sunt quis nulla pariatur labore ullamco. Eiusmod ut dolor aliqua quis
145+
do. Ea laborum nulla minim cillum est sit exercitation officia. Amet dolor cillum irure incididunt.
146+
</p>
147+
<p>
148+
Voluptate in duis esse nisi excepteur duis ipsum. Nisi tempor nostrud proident Lorem mollit. Minim ut
149+
laboris elit reprehenderit minim labore nostrud occaecat magna quis tempor sint. Ut nisi sunt nulla
150+
deserunt esse excepteur quis non commodo laborum eiusmod commodo esse sint.
151+
</p>
152+
{!sticky && (
153+
<button className="scroll-to-bottom-button" onClick={scrollToBottom}>
154+
Click me to scroll to bottom
155+
</button>
156+
)}
157+
</React.Fragment>
158+
);
159+
};
160+
161+
render(
162+
<ReactScrollToBottom className="scroll-to-bottom">
163+
<FunctionContext.Consumer>
164+
{({ scrollToBottom }) => (
165+
<StateContext.Consumer>
166+
{({ sticky }) => <Content scrollToBottom={scrollToBottom} sticky={sticky} />}
167+
</StateContext.Consumer>
168+
)}
169+
</FunctionContext.Consumer>
170+
</ReactScrollToBottom>,
171+
document.getElementById('app')
172+
);
173+
</script>
174+
</body>
175+
</html>

0 commit comments

Comments
 (0)