Skip to content

Commit 103a3d8

Browse files
exogenexogen
committed
Update demo GIFs
1 parent c02d89d commit 103a3d8

File tree

7 files changed

+242
-18
lines changed

7 files changed

+242
-18
lines changed

‎README.md‎

Lines changed: 24 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,26 @@
11
# react-overflow-indicator ⏬
22

3-
![Animated demo](./overflow.gif)
3+
<table>
4+
<tbody>
5+
<tr>
6+
<td>
7+
8+
![Shadow animated demo](./demo-shadow.gif)
9+
10+
</td>
11+
<td>
12+
13+
![Fade animated demo](./demo-fade.gif)
14+
15+
</td>
16+
<td>
17+
18+
![Icon animated demo](./demo-icon.gif)
19+
20+
</td>
21+
</tr>
22+
</tbody>
23+
</table>
424

525
- Let users know when there’s more content to see in an `overflow` container, in
626
case their device hides scrollbars.
@@ -24,7 +44,8 @@ Import:
2444
import Overflow from 'react-overflow-indicator';
2545
```
2646

27-
Render indicators automatically using the `Overflow.Indicator` component:
47+
Render indicators automatically using `<Overflow.Indicator>` inside of
48+
`<Overflow>`:
2849

2950
```jsx
3051
<Overflow>
@@ -35,7 +56,7 @@ Render indicators automatically using the `Overflow.Indicator` component:
3556
</Overflow>
3657
```
3758

38-
…or, use the `onStateChange` prop to react to scrollability however you like:
59+
…or, use the `onStateChange` prop to react to overflow however you like:
3960

4061
```jsx
4162
const [canScroll, setCanScroll] = useState(false);

‎demo-fade.gif‎

744 KB
Loading

‎demo-icon.gif‎

705 KB
Loading

‎demo-shadow.gif‎

707 KB
Loading

‎overflow.gif‎

-3.88 MB
Binary file not shown.

‎pages/index.js‎

Lines changed: 215 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
import React, { useState } from 'react';
22
import Overflow from '../src';
33

4-
const shadowStart = 'rgba(68, 49, 38, 0.3)';
5-
const shadowEnd = 'rgba(56, 44, 36, 0)';
6-
74
function MoreIndicator({ isVisible = true }) {
85
return (
96
<span
@@ -24,7 +21,13 @@ function MoreIndicator({ isVisible = true }) {
2421
);
2522
}
2623

27-
function Shadow({ direction, isVisible, size = 30 }) {
24+
function Shadow({
25+
direction,
26+
isVisible,
27+
size = 30,
28+
startColor = 'rgba(68, 49, 38, 0.3)',
29+
endColor = 'rgba(56, 44, 36, 0)'
30+
}) {
2831
const style = {
2932
position: 'absolute',
3033
zIndex: 1,
@@ -38,28 +41,28 @@ function Shadow({ direction, isVisible, size = 30 }) {
3841
style.left = 0;
3942
style.right = 0;
4043
style.height = size;
41-
style.background = `linear-gradient(to bottom, ${shadowStart}, ${shadowEnd})`;
44+
style.background = `linear-gradient(to bottom, ${startColor}, ${endColor})`;
4245
break;
4346
case 'left':
4447
style.top = 0;
4548
style.left = 0;
4649
style.bottom = 0;
4750
style.width = size;
48-
style.background = `linear-gradient(to right, ${shadowStart}, ${shadowEnd})`;
51+
style.background = `linear-gradient(to right, ${startColor}, ${endColor})`;
4952
break;
5053
case 'right':
5154
style.top = 0;
5255
style.right = 0;
5356
style.bottom = 0;
5457
style.width = size;
55-
style.background = `linear-gradient(to left, ${shadowStart}, ${shadowEnd})`;
58+
style.background = `linear-gradient(to left, ${startColor}, ${endColor})`;
5659
break;
5760
case 'down':
5861
style.left = 0;
5962
style.right = 0;
6063
style.bottom = 0;
6164
style.height = size;
62-
style.background = `linear-gradient(to top, ${shadowStart}, ${shadowEnd})`;
65+
style.background = `linear-gradient(to top, ${startColor}, ${endColor})`;
6366
break;
6467
}
6568
return <div style={style} />;
@@ -175,6 +178,59 @@ function OverflowDemo({
175178
export default function DemoPage() {
176179
return (
177180
<main>
181+
<style jsx global>
182+
{`
183+
@keyframes bounce {
184+
0% {
185+
transform: translate3d(-50%, 0, 0);
186+
}
187+
50% {
188+
transform: translate3d(-50%, -10px, 0);
189+
}
190+
100% {
191+
transform: translateY(-50%, 0, 0);
192+
}
193+
}
194+
195+
@keyframes fadeOut {
196+
0% {
197+
opacity: 1;
198+
}
199+
50% {
200+
opacity: 1;
201+
}
202+
100% {
203+
opacity: 0;
204+
}
205+
}
206+
207+
ul {
208+
list-style: none;
209+
margin: 0;
210+
padding: 0;
211+
border: 1px solid #ddd;
212+
margin: 10px;
213+
background: rgb(247, 245, 241);
214+
}
215+
216+
li {
217+
border-top: 1px solid #fff;
218+
border-bottom: 1px solid #ccc;
219+
padding: 10px 12px;
220+
}
221+
222+
li:last-child {
223+
border-bottom: 0;
224+
}
225+
226+
h2 {
227+
margin: 10px;
228+
font-size: 18px;
229+
font-weight: bold;
230+
opacity: 0.8;
231+
}
232+
`}
233+
</style>
178234
<OverflowDemo
179235
title="Demo"
180236
style={overflowStyle}
@@ -192,12 +248,157 @@ export default function DemoPage() {
192248
contentStyle={contentStyle}
193249
initialMounted={false}
194250
/>
195-
<Overflow style={{ maxHeight: 300 }}>
196-
<Overflow.Content style={{ minHeight: 800 }}>
197-
Render an element or put your content directly here…
198-
</Overflow.Content>
199-
<Overflow.Indicator direction="down">👇</Overflow.Indicator>
200-
</Overflow>
251+
<div
252+
style={{
253+
display: 'grid',
254+
gridAutoFlow: 'column',
255+
justifyContent: 'start',
256+
margin: 50,
257+
gridGap: 20
258+
}}
259+
>
260+
<Overflow
261+
tolerance={30}
262+
style={{
263+
width: 280,
264+
height: 200,
265+
maxHeight: 300,
266+
border: '2px solid rgb(93, 160, 238)',
267+
fontFamily: 'Lato',
268+
fontSize: 18
269+
}}
270+
>
271+
<Overflow.Content
272+
style={{
273+
color: 'rgb(47, 44, 42)'
274+
}}
275+
>
276+
<h2>Ingredients:</h2>
277+
<ul>
278+
<li>3 slices fresh cucumber</li>
279+
<li>3 sprigs fresh mint</li>
280+
<li>a pinch of salt</li>
281+
<li>2 oz gin</li>
282+
<li>¾ oz lime juice</li>
283+
<li>¾ oz simple syrup</li>
284+
<li>3 drops rose water</li>
285+
<li>3 drops Angostura bitters</li>
286+
</ul>
287+
</Overflow.Content>
288+
<Overflow.Indicator direction="up">
289+
{canScroll => <Shadow direction="up" isVisible={canScroll} />}
290+
</Overflow.Indicator>
291+
<Overflow.Indicator direction="down">
292+
{canScroll => <Shadow direction="down" isVisible={canScroll} />}
293+
</Overflow.Indicator>
294+
</Overflow>
295+
<Overflow
296+
tolerance={30}
297+
style={{
298+
width: 280,
299+
height: 200,
300+
maxHeight: 300,
301+
border: '2px solid rgb(93, 160, 238)',
302+
fontFamily: 'Lato',
303+
fontSize: 18
304+
}}
305+
>
306+
<Overflow.Content
307+
style={{
308+
color: 'rgb(47, 44, 42)'
309+
}}
310+
>
311+
<h2>Ingredients:</h2>
312+
<ul>
313+
<li>3 slices fresh cucumber</li>
314+
<li>3 sprigs fresh mint</li>
315+
<li>a pinch of salt</li>
316+
<li>2 oz gin</li>
317+
<li>¾ oz lime juice</li>
318+
<li>¾ oz simple syrup</li>
319+
<li>3 drops rose water</li>
320+
<li>3 drops Angostura bitters</li>
321+
</ul>
322+
</Overflow.Content>
323+
<Overflow.Indicator direction="up">
324+
{canScroll => (
325+
<Shadow
326+
direction="up"
327+
isVisible={canScroll}
328+
size={30}
329+
startColor="rgba(255, 255, 255, 1)"
330+
endColor="rgba(255, 255, 255, 0)"
331+
/>
332+
)}
333+
</Overflow.Indicator>
334+
<Overflow.Indicator direction="down">
335+
{canScroll => (
336+
<Shadow
337+
direction="down"
338+
isVisible={canScroll}
339+
size={30}
340+
startColor="rgba(255, 255, 255, 1)"
341+
endColor="rgba(255, 255, 255, 0)"
342+
/>
343+
)}
344+
</Overflow.Indicator>
345+
</Overflow>
346+
<Overflow
347+
tolerance={30}
348+
style={{
349+
width: 280,
350+
height: 200,
351+
maxHeight: 300,
352+
border: '2px solid rgb(93, 160, 238)',
353+
fontFamily: 'Lato',
354+
fontSize: 18
355+
}}
356+
>
357+
<Overflow.Content
358+
style={{
359+
color: 'rgb(47, 44, 42)'
360+
}}
361+
>
362+
<h2>Ingredients:</h2>
363+
<ul>
364+
<li>3 slices fresh cucumber</li>
365+
<li>3 sprigs fresh mint</li>
366+
<li>a pinch of salt</li>
367+
<li>2 oz gin</li>
368+
<li>¾ oz lime juice</li>
369+
<li>¾ oz simple syrup</li>
370+
<li>3 drops rose water</li>
371+
<li>3 drops Angostura bitters</li>
372+
</ul>
373+
</Overflow.Content>
374+
<Overflow.Indicator direction="down">
375+
{canScroll => (
376+
<span
377+
style={{
378+
position: 'absolute',
379+
right: 0,
380+
bottom: 12,
381+
transform: 'translate3d(-50%, 0, 0)',
382+
display: 'inline-block',
383+
width: 40,
384+
height: 40,
385+
fontSize: 24,
386+
border: '1px solid #ddd',
387+
lineHeight: '40px',
388+
background: 'white',
389+
borderRadius: '50%',
390+
textAlign: 'center',
391+
opacity: canScroll ? 1 : 0,
392+
animation: 'bounce 2s infinite ease',
393+
transition: 'opacity 500ms 500ms ease-out'
394+
}}
395+
>
396+
{canScroll ? '⏬' : '✅'}
397+
</span>
398+
)}
399+
</Overflow.Indicator>
400+
</Overflow>
401+
</div>
201402
</main>
202403
);
203404
}

‎src/index.js‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,9 @@ const viewportStyle = {
2525

2626
const contentStyle = {
2727
display: 'inline-block',
28-
position: 'relative'
28+
position: 'relative',
29+
minWidth: '100%',
30+
boxSizing: 'border-box'
2931
};
3032

3133
function reducer(state, action) {

0 commit comments

Comments
 (0)