Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 103a3d8

Browse files
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>3⁄4 oz lime juice</li>
283+
<li>3⁄4 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>3⁄4 oz lime juice</li>
318+
<li>3⁄4 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>3⁄4 oz lime juice</li>
369+
<li>3⁄4 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)

AltStyle によって変換されたページ (->オリジナル) /