Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/simbathesailor/react-infinite-scroll
A dead simple infinite scroll (1.3 kb gzipped) for friends
https://github.com/simbathesailor/react-infinite-scroll
custom-hooks infinite-scroll intersection-observer react-hooks
Last synced: 27 days ago
JSON representation
A dead simple infinite scroll (1.3 kb gzipped) for friends
- Host: GitHub
- URL: https://github.com/simbathesailor/react-infinite-scroll
- Owner: simbathesailor
- License: mit
- Created: 2019-10-23T08:56:52.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T00:44:20.000Z (almost 2 years ago)
- Last Synced: 2024-08-08T16:14:54.554Z (3 months ago)
- Topics: custom-hooks, infinite-scroll, intersection-observer, react-hooks
- Language: TypeScript
- Homepage: https://simbathesailor-react-infinite-scroll.now.sh/
- Size: 7.74 MB
- Stars: 14
- Watchers: 4
- Forks: 2
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-infinite-scroll 📜
### A dead simple React infinite-scroll
#### ✅ Built on new flashy Reactjs hooks.
#### ✅ No assumption on the how you bring data, just wrap the content inside the InfiniteScroll component
#### ✅ Uses Intersection Observer API, hence performant than regular ways of doing it
#### ✅ Completely configurable. Can be used to trigger infinite scroll in any direction.
#### ✅ Takes care of screen resizing
#### ✅ Tiny (1.3kb gzipped)
### Installing
If using npm:
```sh
npm i @simbathesailor/react-infinite-scroll --save
```
If using yarn:
```sh
yarn add @simbathesailor/react-infinite-scroll
```
## Demo
[Demo App](https://nm7ls.csb.app/)
[Full Codesandbox Code](https://codesandbox.io/s/useintersectionobserver-nm7ls)
## Usage
### Scenario: When need to fetch new set of data when scroll end is reached
```jsx
import { InfiniteScroll } from '@simbathesailor/react-infinite-scroll';
function App() {
// setting up the active page fetched, It can be any logic needed
const [activePageInfo, setActivePageInfo] = React.useState(1);
// This is data recieved till now, which will be rendered.
const [dataInfiniteScroll, setDataInfiniteScroll] = React.useState(null);
// Logic to execute to get the initial set of results
// On mount of the component , we are making an API call to get
// the initial set of results.
React.useEffect(() => {
fetch(
`https://5da9aa08de10b40014f3745c.mockapi.io/api/v1/feed?page=1&limit=10`
)
.then(res => {
return res.json();
})
.then(data => {
setDataInfiniteScroll(data);
});
}, []);
// Logic to execute when the reached the end of the scroll
// This is a callback which can be passed to InfiniteScroll component, The callback
// will recieve the isVisible value as true when we reach the end of the scroll.
const callbackForInfiniteScroll = React.useCallback(
isVisible => {
let activePage;
setActivePageInfo(c => {
activePage = c;
return c;
});
if (isVisible) {
fetch(
`https://5da9aa08de10b40014f3745c.mockapi.io/api/v1/feed?page=${activePage +
1}&limit=10`
)
.then(res => {
return res.json();
})
.then(data => {
setDataInfiniteScroll(dataInState => [...dataInState, ...data]);
setActivePageInfo(c => c + 1);
});
}
},
[setActivePageInfo]
);
return (
{/* Just need to pass the callback to invoke, when list reaches end */}
{dataInfiniteScroll &&
dataInfiniteScroll.map(elem => {
/** Box is not a React element. It's a React component **/
return ;
})}
);
}
// It is important to use forwardRef when Components are not React Elements.
// InfiniteScroll component takes the responsibility of initiliazing
// the intersection observer for you. ref should resolve to a DOM element
const Box = React.forwardRef((props, ref) => {
const { avatar, id, name } = props;
return (
{name}
);
});
```
### Scenario: When need to fetch new set of data with some offset at bottom of the page.
Let' see only the changed code from above. Infinite scroll takes rootMargin as one of the option similar to intersection observer API. Hence any offset can be given as:
rootMargin: "[topOffset], [rightOffset], [bottomOffset], [leftOffset]". Let's see the one of the example having a bottom offset of 680px.
```jsx
Scroll to see Infinite scroll in action
{/* Just need to pass the callback to invoke, when list reaches end */}
{dataInfiniteScroll &&
dataInfiniteScroll.map(elem => {
return ;
})}
```
We can also give , top offset, left offset and right offset. So Infinite scroll can be done in any direction. This also support infinite scrolls in scrollable areas apart from viewport. \*Need to test more on that.
## Props
| Props | IsMandatory | Type | Default | Description |
| ------------------ | ----------- | ----------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| callback | Yes | (isVisibile) => {
// Logic to trigger
// next set of data
} | | A callback from consumer,
which gets isVisible boolean
as the argument. |
| options | No | object | {
rootMargin: '0px 0px 0px 0px'
threshold: '0, 1'
when: true
visibilityCondition: Function
} | These are the almost same options,
which we pass to intersectionObserver
except threshold which is changed to string type.
Done for avoiding extra check for array
comparison. |
| whenInfiniteScroll | No | boolean | true | The flag which can be used to stop
infinitescroll behaviour, when false.
can be used to off when , data is no
more to be fetched. |
| LoadMoreComponent | No | React.ReactElement | Loading More... | This is a ReactElement or React Component
which is shown when scroll reaches end |
## Concept
react-infinite-scroll is using **Intersection Observer API**. Hence very performant and slick. We can pass almost same options we pass for setting up intersection observer. Here is the link for [MDN Intersection observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#root-intersection-rectangle). You can read about it and understand why it is performant.
The InfiniteScroll Component make use of useInfiniteScroll and useIntersectionObserver hook. React version above >16.8.6 can use this component for infinite scrolling.
Plan is to bundle useIntersectionObserver as a separate package later.
## Work to do
- TestCases.
- Other examples
- Update readme with all the props InfiniteScroll component takes as a table.
- Example how to stop the infinite scroll and sending the custom components as Loader.
## Contributing
Please read [CONTRIBUTING.md](CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/your/project/tags).
## Authors
[simbathesailor](https://github.com/simbathesailor)
See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.
## License
This project is licensed under the MIT License - see the [LICENSE.md](LICENSE.md) file for details
## Contributors
Thanks goes to these wonderful people ([emoji key](https://github.com/all-contributors/all-contributors#emoji-key)):
