reactjs-infinite-scroll-loop

react-infinite-scroll-loop

Usage

<InfiniteScrollLoop {/* props here */}>
    <ContentWrapper {/* props here */}>
        {/* Content element 1 */}
    </ContentWrapper>
    <ContentWrapper {/* props here */}>
        {/* Content element 2 */}
    </ContentWrapper>
    ...
</InfiniteScrollLoop>

Animation

Custom animation when a content element is selected can be implemented by adding the custom pseudo class <className>__selected. The animation transition duration can be added to the target <className>.

Example

The following code snippets reproduce the above gif:

React JS:

const Example = () => {
    return (
        <div style={{ height:"150px", width:"200px" }}>
            <InfiniteScrollLoop>
                {
                    Array(6).fill(0).map((v, i) => {
                        return <Content key={i} id={`${i+1}`} number={i+1}/>
                    })
                }
            </InfiniteScrollLoop>
        </div>
    );
};

interface ContentProps {
    id: string;
    number: number;
}

const Content = ({ id, number }: ContentProps) => {
    return (
        <ContentWrapper height="30%" width="100%">
            <div id={id} className="container" >
                <h4 className="number">{number}</h4>
            </div>
        </ContentWrapper>
    );
};

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.

Footnotes

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. ↩