https://github.com/jmestxr/react-infinite-scroll-loop
React component that supports infinite scrolling of finite number of elements.
https://github.com/jmestxr/react-infinite-scroll-loop
infinite-scrolling react ui-component
Last synced: 3 months ago
JSON representation
React component that supports infinite scrolling of finite number of elements.
- Host: GitHub
- URL: https://github.com/jmestxr/react-infinite-scroll-loop
- Owner: jmestxr
- Created: 2022-12-03T11:41:06.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-01-14T18:14:26.000Z (over 3 years ago)
- Last Synced: 2025-03-04T19:44:47.872Z (over 1 year ago)
- Topics: infinite-scrolling, react, ui-component
- Language: TypeScript
- Homepage:
- Size: 1.25 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-infinite-scroll-loop
React component that supports infinite scrolling of finite number of elements.
## Installation
To download react-infinite-scroll-loop, run:
```console
npm i reactjs-infinite-scroll-loop
```
## Usage
```jsx
import { InfiniteScrollLoop, ContentWrapper } from 'reactjs-infinite-scroll-loop';
{/* Content element 1 */}
{/* Content element 2 */}
...
```
## Animation
Custom animation when a content element is selected can be implemented by adding the custom pseudo class `__selected`. The animation
transition duration can be added to the target ``.
## Example
The following code snippets reproduce the above gif:
### React JS:
```jsx
const Example = () => {
return (
{
Array(6).fill(0).map((v, i) => {
return
})
}
);
};
interface ContentProps {
id: string;
number: number;
}
const Content = ({ id, number }: ContentProps) => {
return (
{number}
);
};
```
### CSS:
```css
.container {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.number {
margin: 0;
opacity: 0.2;
font-size: 18px;
transition: 0.2s;
}
.number__selected {
opacity: 1;
font-size: 25px;
}
```
## Docs
### InfiniteScrollLoop Props
| Name | Type | Default | Description |
|----------------|-----------------------------|-----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| `children` | `React.ReactNode` | None (required) | The content of the scroll container.[^1] |
| `onSelect` | `(selected: Element) => void` | `undefined` | Executes a given JavaScript code on the selected element. |
| `verticalScroll` | `boolean` | `true` | The direction of scroll. `true` for vertical and `false` for horizontal.[^2] |
| `backup` | `number` | `50` | The number of backup content sets on the top and bottom. Increasing this number will increase the amount of scroll required to the end of the scroll container, but decreases performance as more content needs to be rendered. |
### ContentWrapper Props
| Name | Type | Default | Description |
|--------|---------------------------------------|---------|-------------------------------------|
| `height` | `string` (accept any CSS height values) | `‘auto’` | The height of each content element. |
| `width` | `string` (accept any CSS width values) | `‘auto’` | The width of each content element. |
[^1]: Each content element must be contained in a ContentWrapper, or a custom parent wrapper class that consists of the scroll-snap-align property.
[^2]: If scrollDirection is vertical, the height of scroll container must be larger than the height of each content element.
If scrollDirection is horizontal, the width of scroll container must be larger than the width of each content element.