flexible-infinity-scroll

flexible-infinity-scroll for react

* This plugin can use it to do infinity scroll in React.
* Even if infinite items have different height values, the rendering is calculated and displayed flexibly.

**

> Full Screen Infinity Scroll

``scss
.content {
padding: 1rem;
}

.scroll_wrap {
display: flex;
flex-direction: column;
gap: 1rem;
}

.scroll_item {
box-shadow: 0 0 3px black;
border-radius: 0.5rem;
padding: 0.5rem;
display: flex;

.img_wrap {
width: 50px;
height: 50px;
border-radius: 50%;
background: grey;
margin-right: 0.5rem
}

.text_wrap {
white-space: pre-wrap;
}
}
`

`tsx
import React, {useEffect, useRef, useState} from "react";
import {uesScrollPaging} from "flexible-infinity-scroll/lib/uesScrollPaging";
import {ScrollPagingWrap} from "flexible-infinity-scroll/lib/ScrollPagingWrap";
import {ScrollPagingItem} from "flexible-infinity-scroll/lib/ScrollPagingItem";
import {ScrollPagingMore} from "flexible-infinity-scroll/lib/ScrollPagingMore";
import infinityCss from './infinityScroll.module.scss'

type paramType = {
cnt: number
}

const FullScreen = () => {
const [list, setList] = useState([])

useEffect(() => {
getEvent()
}, [])

const {wrap, item, more,} = uesScrollPaging({list});

const getEvent = async () => {
await new Promise(resolve => setTimeout(resolve, 500))
const items: paramType[] = Array(10).fill(0).map(() => ({cnt: Math.floor(Math.random() * 5 + 3)}))
list.push(...items)
setList([...list])
};

return (

{(v, i) => {
return <>

Index : {i}

Line : {v.cnt}

{'\\n\n'.repeat(v.cnt)}

}}


display: flex; justify-content: center; align-content: center}>
Loading...




)
}

export default FullScreen
`
!Animation

**

> Independent Infinity Scroll

`scss
.content {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: fixed;
}

.scroll_container {
overflow: auto;
width: 50vw;
min-width: 400px;
height: 500px;
border: 1px solid grey;
padding: 1rem
}

.scroll_wrap {
display: flex;
flex-direction: column;
gap: 1rem;
}

.scroll_item {
box-shadow: 0 0 3px black;
border-radius: 0.5rem;
padding: 0.5rem;
display: flex;

.img_wrap {
width: 50px;
height: 50px;
border-radius: 50%;
background: grey;
margin-right: 0.5rem
}

.text_wrap {
white-space: pre-wrap;
}
}
`

`tsx
import React, {useEffect, useRef, useState} from "react";
import {uesScrollPaging} from "flexible-infinity-scroll/lib/uesScrollPaging";
import {ScrollPagingContainer} from "flexible-infinity-scroll/lib/ScrollPagingContainer";
import {ScrollPagingWrap} from "flexible-infinity-scroll/lib/ScrollPagingWrap";
import {ScrollPagingItem} from "flexible-infinity-scroll/lib/ScrollPagingItem";
import {ScrollPagingMore} from "flexible-infinity-scroll/lib/ScrollPagingMore";
import infinityCss from './infinityScroll.module.scss'

type paramType = {
cnt: number
}

const Independent = () => {
const [list, setList] = useState([])

useEffect(() => {
getEvent()
}, [])

const {container, wrap, item, more} = uesScrollPaging({list});

const getEvent = async () => {
await new Promise(resolve => setTimeout(resolve, 500))
const items: paramType[] = Array(10).fill(0).map(() => ({cnt: Math.floor(Math.random() * 5 + 3)}))
list.push(...items)
setList([...list])
};

return (

{(v, i) => {
return <>

Index : {i}

Line : {v.cnt}

{'\\n\n'.repeat(v.cnt)}

}}


display: flex; justify-content: center; align-content: center}>
Loading...





);
}

export default Independent
`
!Animation

**

> Scroll Change Item

`tsx
import React, {useEffect, useRef, useState} from "react";
import {uesScrollPaging} from "flexible-infinity-scroll/lib/uesScrollPaging";
import {ScrollPagingContainer} from "flexible-infinity-scroll/lib/ScrollPagingContainer";
import {ScrollPagingWrap} from "flexible-infinity-scroll/lib/ScrollPagingWrap";
import {ScrollPagingItem} from "flexible-infinity-scroll/lib/ScrollPagingItem";
import {ScrollPagingMore} from "flexible-infinity-scroll/lib/ScrollPagingMore";
import infinityCss from './infinityScroll.module.scss'

type paramType = {
cnt: number
}

const Independent = () => {
const [list, setList] = useState([])

useEffect(() => {
getEvent()
}, [])

const {container, wrap, item, more} = uesScrollPaging({list});

const getEvent = async () => {
await new Promise(resolve => setTimeout(resolve, 500))
const items: paramType[] = Array(10).fill(0).map(() => ({cnt: Math.floor(Math.random() * 5 + 3)}))
list.push(...items)
setList([...list])
};

return (

{(v, i) => {
return <>

Index : {i}

Line : {v.cnt}
setList(v => {
v[i].cnt += 1
return [...v]
})}>+1
setList(v => {
v[i].cnt -= 1
return [...v]
})}>-1

{'\\n\n'.repeat(v.cnt)}

}}


display: flex; justify-content: center; align-content: center}>
Loading...





);
}

export default Independent
`
!Animation

> Scroll List End Point

`tsx
import React, {useEffect, useRef, useState} from "react";
import {uesScrollPaging} from "flexible-infinity-scroll/lib/uesScrollPaging";
import {ScrollPagingContainer} from "flexible-infinity-scroll/lib/ScrollPagingContainer";
import {ScrollPagingWrap} from "flexible-infinity-scroll/lib/ScrollPagingWrap";
import {ScrollPagingItem} from "flexible-infinity-scroll/lib/ScrollPagingItem";
import {ScrollPagingMore} from "flexible-infinity-scroll/lib/ScrollPagingMore";
import infinityCss from './infinityScroll.module.scss'

type paramType = {
cnt: number
}

const Independent = () => {
const [list, setList] = useState([])

useEffect(() => {
getEvent()
}, [])

const {container, wrap, item, more, setEnd} = uesScrollPaging({list});

const getEvent = async () => {
await new Promise(resolve => setTimeout(resolve, 500))
list.push({
cnt: 1
})
setList([...list])
if (list.length > 3) setEnd()
};

return (

{(v, i) => {
return <>

Index : {i}

Line : {v.cnt}
setList(v => {
v[i].cnt += 1
return [...v]
})}>+1
setList(v => {
v[i].cnt -= 1
return [...v]
})}>-1

{'\\n\n'.repeat(v.cnt)}

}}


display: flex; justify-content: center; align-content: center}>
Loading...





);
}

export default Independent
`
!Animation

> Scroll List No Data

`tsx
import React, {useEffect, useRef, useState} from "react";
import {uesScrollPaging} from "flexible-infinity-scroll/lib/uesScrollPaging";
import {ScrollPagingContainer} from "flexible-infinity-scroll/lib/ScrollPagingContainer";
import {ScrollPagingWrap} from "flexible-infinity-scroll/lib/ScrollPagingWrap";
import {ScrollPagingItem} from "flexible-infinity-scroll/lib/ScrollPagingItem";
import {ScrollPagingMore} from "flexible-infinity-scroll/lib/ScrollPagingMore";
import infinityCss from './infinityScroll.module.scss'

type paramType = {
cnt: number
}

const Independent = () => {
const [list, setList] = useState([])

useEffect(() => {
getEvent()
}, [])

const {container, wrap, item, more, setEnd} = uesScrollPaging({list});

const getEvent = async () => {
await new Promise(resolve => setTimeout(resolve, 500))
setEnd()
};

return (

{(v, i) => {
return <>

Index : {i}

Line : {v.cnt}
setList(v => {
v[i].cnt += 1
return [...v]
})}>+1
setList(v => {
v[i].cnt -= 1
return [...v]
})}>-1

{'\\n\n'.repeat(v.cnt)}

}}

No Data

display: flex; justify-content: center; align-content: center}>
Loading...





);
}

export default Independent
``
!Animation