Skip to content

Commit e5863aa

Browse files
osmarpb97osmarpb97
committed
Add: Example and storybook of infinite scroll on top and fix 1px problem when scrollThreshold=0
1 parent dde9990 commit e5863aa

File tree

4 files changed

+135
-31
lines changed

4 files changed

+135
-31
lines changed

‎README.md

Lines changed: 62 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ A component to make all your infinite scrolling woes go away with just 4.15 kB!
44
added. An infinite-scroll that actually works and super-simple to integrate!
55

66
# install
7+
78
```bash
89
npm install --save react-infinite-scroll-component
910

@@ -26,7 +27,7 @@ added. An infinite-scroll that actually works and super-simple to integrate!
2627
hasMore={true}
2728
loader={<h4>Loading...</h4>}
2829
endMessage={
29-
<p style={{textAlign: 'center'}}>
30+
<p style={{ textAlign: 'center' }}>
3031
<b>Yay! You have seen it all</b>
3132
</p>
3233
}
@@ -35,23 +36,55 @@ added. An infinite-scroll that actually works and super-simple to integrate!
3536
pullDownToRefresh
3637
pullDownToRefreshThreshold={50}
3738
pullDownToRefreshContent={
38-
<h3 style={{textAlign: 'center'}}>&#8595; Pull down to refresh</h3>
39+
<h3 style={{ textAlign: 'center' }}>&#8595; Pull down to refresh</h3>
3940
}
4041
releaseToRefreshContent={
41-
<h3 style={{textAlign: 'center'}}>&#8593; Release to refresh</h3>
42-
}>
42+
<h3 style={{ textAlign: 'center' }}>&#8593; Release to refresh</h3>
43+
}
44+
>
4345
{items}
4446
</InfiniteScroll>
4547
```
4648

49+
# using scroll on top
50+
51+
```jsx
52+
<div
53+
id="scrollableDiv"
54+
style={{
55+
height: 300,
56+
overflow: 'auto',
57+
display: 'flex',
58+
flexDirection: 'column-reverse',
59+
}}
60+
>
61+
{/*Put the scroll bar always on the bottom*/}
62+
<InfiniteScroll
63+
dataLength={this.state.items.length}
64+
next={this.fetchMoreData}
65+
style={{ display: 'flex', flexDirection: 'column-reverse' }} //To put endMessage and loader to the top.
66+
inverse={true} //
67+
hasMore={true}
68+
loader={<h4>Loading...</h4>}
69+
scrollableTarget="scrollableDiv"
70+
>
71+
{this.state.items.map((_, index) => (
72+
<div style={style} key={index}>
73+
div - #{index}
74+
</div>
75+
))}
76+
</InfiniteScroll>
77+
</div>
78+
```
79+
4780
The `InfiniteScroll` component can be used in three ways.
4881

4982
- Specify a value for the `height` prop if you want your **scrollable** content to have a specific height, providing scrollbars for scrolling your content and fetching more data.
5083
- If your **scrollable** content is being rendered within a parent element that is already providing overflow scrollbars, you can set the `scrollableTarget` prop to reference the DOM element and use it's scrollbars for fetching more data.
51-
- Without setting either the `height` or `scrollableTarget` props, the scroll will happen at `document.body` like *Facebook's* timeline scroll.
52-
84+
- Without setting either the `height` or `scrollableTarget` props, the scroll will happen at `document.body` like _Facebook's_ timeline scroll.
5385

5486
# docs version wise
87+
5588
[3.0.2](docs/README-3.0.2.md)
5689

5790
# live examples
@@ -66,24 +99,26 @@ The `InfiniteScroll` component can be used in three ways.
6699
- [![Edit r7rp40n0zm](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/r7rp40n0zm)
67100

68101
# props
69-
name | type | description
70-
-----|------|------------
71-
**next** | function | a function which must be called after reaching the bottom. It must trigger some sort of action which fetches the next data. **The data is passed as `children` to the `InfiniteScroll` component and the data should contain previous items too.** e.g. *Initial data = [1, 2, 3]* and then next load of data should be *[1, 2, 3, 4, 5, 6]*.
72-
**hasMore** | boolean | it tells the `InfiniteScroll` component on whether to call `next` function on reaching the bottom and shows an `endMessage` to the user
73-
**children** | node (list) | the data items which you need to scroll.
74-
**dataLength** | number | set the length of the data.This will unlock the subsequent calls to next.
75-
**loader** | node | you can send a loader component to show while the component waits for the next load of data. e.g. `<h3>Loading...</h3>` or any fancy loader element
76-
**scrollThreshold** | number &#124; string | A threshold value defining when `InfiniteScroll` will call `next`. Default value is `0.8`. It means the `next` will be called when user comes below 80% of the total height. If you pass threshold in pixels (`scrollThreshold="200px"`), `next` will be called once you scroll at least (100% - scrollThreshold) pixels down.
77-
**onScroll** | function | a function that will listen to the scroll event on the scrolling container. Note that the scroll event is throttled, so you may not receive as many events as you would expect.
78-
**endMessage** | node | this message is shown to the user when he has seen all the records which means he's at the bottom and `hasMore` is `false`
79-
**className** | string | add any custom class you want
80-
**style** | object | any style which you want to override
81-
**height** | number | optional, give only if you want to have a fixed height scrolling content
82-
**scrollableTarget** | node or string | optional, reference to a (parent) DOM element that is already providing overflow scrollbars to the `InfiniteScroll` component. *You should provide the `id` of the DOM node preferably.*
83-
**hasChildren** | bool | `children` is by default assumed to be of type array and it's length is used to determine if loader needs to be shown or not, if your `children` is not an array, specify this prop to tell if your items are 0 or more.
84-
**pullDownToRefresh** | bool | to enable **Pull Down to Refresh** feature
85-
**pullDownToRefreshContent** | node | any JSX that you want to show the user, `default={<h3>Pull down to refresh</h3>}`
86-
**releaseToRefreshContent** | node | any JSX that you want to show the user, `default={<h3>Release to refresh</h3>}`
87-
**pullDownToRefreshThreshold** | number | minimum distance the user needs to pull down to trigger the refresh, `default=100px` , a lower value may be needed to trigger the refresh depending your users browser.
88-
**refreshFunction** | function | this function will be called, it should return the fresh data that you want to show the user
89-
**initialScrollY** | number | set a scroll y position for the component to render with.
102+
103+
| name | type | description |
104+
| ------------------------------ | -------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
105+
| **next** | function | a function which must be called after reaching the bottom. It must trigger some sort of action which fetches the next data. **The data is passed as `children` to the `InfiniteScroll` component and the data should contain previous items too.** e.g. _Initial data = [1, 2, 3]_ and then next load of data should be _[1, 2, 3, 4, 5, 6]_. |
106+
| **hasMore** | boolean | it tells the `InfiniteScroll` component on whether to call `next` function on reaching the bottom and shows an `endMessage` to the user |
107+
| **children** | node (list) | the data items which you need to scroll. |
108+
| **dataLength** | number | set the length of the data.This will unlock the subsequent calls to next. |
109+
| **loader** | node | you can send a loader component to show while the component waits for the next load of data. e.g. `<h3>Loading...</h3>` or any fancy loader element |
110+
| **scrollThreshold** | number &#124; string | A threshold value defining when `InfiniteScroll` will call `next`. Default value is `0.8`. It means the `next` will be called when user comes below 80% of the total height. If you pass threshold in pixels (`scrollThreshold="200px"`), `next` will be called once you scroll at least (100% - scrollThreshold) pixels down. |
111+
| **onScroll** | function | a function that will listen to the scroll event on the scrolling container. Note that the scroll event is throttled, so you may not receive as many events as you would expect. |
112+
| **endMessage** | node | this message is shown to the user when he has seen all the records which means he's at the bottom and `hasMore` is `false` |
113+
| **className** | string | add any custom class you want |
114+
| **style** | object | any style which you want to override |
115+
| **height** | number | optional, give only if you want to have a fixed height scrolling content |
116+
| **scrollableTarget** | node or string | optional, reference to a (parent) DOM element that is already providing overflow scrollbars to the `InfiniteScroll` component. _You should provide the `id` of the DOM node preferably._ |
117+
| **hasChildren** | bool | `children` is by default assumed to be of type array and it's length is used to determine if loader needs to be shown or not, if your `children` is not an array, specify this prop to tell if your items are 0 or more. |
118+
| **pullDownToRefresh** | bool | to enable **Pull Down to Refresh** feature |
119+
| **pullDownToRefreshContent** | node | any JSX that you want to show the user, `default={<h3>Pull down to refresh</h3>}` |
120+
| **releaseToRefreshContent** | node | any JSX that you want to show the user, `default={<h3>Release to refresh</h3>}` |
121+
| **pullDownToRefreshThreshold** | number | minimum distance the user needs to pull down to trigger the refresh, `default=100px` , a lower value may be needed to trigger the refresh depending your users browser. |
122+
| **refreshFunction** | function | this function will be called, it should return the fresh data that you want to show the user |
123+
| **initialScrollY** | number | set a scroll y position for the component to render with. |
124+
| **inverse** | bool | set infinite scroll on top |

‎src/index.tsx

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -245,14 +245,15 @@ export default class InfiniteScroll extends Component<Props, State> {
245245

246246
if (threshold.unit === ThresholdUnits.Pixel) {
247247
return (
248-
target.scrollTop <
249-
threshold.value + clientHeight - target.scrollHeight ||
248+
target.scrollTop <=
249+
threshold.value + clientHeight - target.scrollHeight + 1 ||
250250
target.scrollTop === 0
251251
);
252252
}
253-
//targe.scrollTop for brave support
253+
254254
return (
255-
target.scrollTop < threshold.value + clientHeight - target.scrollHeight ||
255+
target.scrollTop <=
256+
threshold.value / 100 + clientHeight - target.scrollHeight + 1 ||
256257
target.scrollTop === 0
257258
);
258259
}

‎src/stories/ScrolleableTop.tsx

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
import React from 'react';
2+
import { render } from 'react-dom';
3+
import InfiniteScroll from '../index';
4+
5+
const style = {
6+
height: 30,
7+
border: '1px solid green',
8+
margin: 6,
9+
padding: 8,
10+
};
11+
12+
export default class App extends React.Component {
13+
state = {
14+
items: Array.from({ length: 20 }),
15+
};
16+
17+
fetchMoreData = () => {
18+
// a fake async api call like which sends
19+
// 20 more records in 1.5 secs
20+
setTimeout(() => {
21+
this.setState({
22+
items: this.state.items.concat(Array.from({ length: 20 })),
23+
});
24+
}, 1500);
25+
};
26+
27+
render() {
28+
return (
29+
<div>
30+
<h1>demo: Infinite Scroll on top</h1>
31+
<hr />
32+
<div
33+
id="scrollableDiv"
34+
style={{
35+
height: 300,
36+
overflow: 'auto',
37+
display: 'flex',
38+
flexDirection: 'column-reverse',
39+
}}
40+
>
41+
<InfiniteScroll
42+
dataLength={this.state.items.length}
43+
next={this.fetchMoreData}
44+
style={{ display: 'flex', flexDirection: 'column-reverse' }} //To put endMessage and loader to the top.
45+
inverse={true}
46+
hasMore={true}
47+
loader={<h4>Loading...</h4>}
48+
scrollableTarget="scrollableDiv"
49+
>
50+
{this.state.items.map((_, index) => (
51+
<div style={style} key={index}>
52+
div - #{index}
53+
</div>
54+
))}
55+
</InfiniteScroll>
56+
</div>
57+
</div>
58+
);
59+
}
60+
}
61+
62+
render(<App />, document.getElementById('root'));

‎src/stories/stories.tsx

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import WindowInf from './WindowInfiniteScrollComponent';
55
import PullDownToRefreshInfScroll from './PullDownToRefreshInfScroll';
66
import InfiniteScrollWithHeight from './InfiniteScrollWithHeight';
77
import ScrollableTargetInfiniteScroll from './ScrollableTargetInfScroll';
8+
import ScrolleableTop from './ScrolleableTop';
9+
810
const stories = storiesOf('Components', module);
911

1012
stories.add('InfiniteScroll', () => <WindowInf />, {
@@ -26,3 +28,7 @@ stories.add(
2628
info: { inline: true },
2729
}
2830
);
31+
32+
stories.add('InfiniteScrollTop', () => <ScrolleableTop />, {
33+
info: { inline: true },
34+
});

0 commit comments

Comments
 (0)