useInfiniteScroll
useInfiniteScroll is a custom hook that provides infinite scroll functionality.
Import
import { useInfiniteScroll } from "@yamada-ui/react"
Usage
Editable example
const [count, setCount] = useState<number>(50) const { ref, isFinish } = useInfiniteScroll({ onLoad: ({ index, finish }) => { console.log("onLoad", index) setCount((prev) => prev + 50) if (index >= 5) finish() }, }) return ( <VStack> {Array(count) .fill(0) .map((_, index) => ( <Card key={index}> <CardHeader> <Heading size="md">俺を誰だと思っていやがるッ!!</Heading> </CardHeader> <CardBody> <Text> 『天元突破グレンラガン』は、ガイナックス・アニプレックス・コナミデジタルエンタテインメント製作の日本のロボットアニメ作品。 </Text> <Text> 作品名の「天元」とは、万物生育の根源という意味があり、また囲碁の用語では碁盤の中央（中心）を指す。劇中のキーワードにも螺旋、ドリル、回転など、中央・中心に関連するものが多く見られ、中央突破、王道路線を念頭に置いた作品名といえる。 </Text> </CardBody> </Card> ))} {!isFinish ? ( <Center ref={ref} w="full"> <Loading fontSize="2xl" /> </Center> ) : null} </VStack> )
Specify the Viewport
To specify the viewport, set a ref to rootRef.
If rootRef is not set, the browser's viewport will be used.
Editable example
const rootRef = useRef<HTMLDivElement>(null) const resetRef = useRef<() => void>(() => {}) const [count, setCount] = useState<number>(50) const { ref, isFinish } = useInfiniteScroll({ onLoad: ({ index, finish }) => { console.log("onLoad", index) setCount((prev) => prev + 50) if (index >= 5) finish() }, rootRef, resetRef, }) return ( <VStack alignItems="flex-start" h="full"> <Container ref={rootRef} flex="1" borderWidth="1px" rounded="md" p="md" overflowY="auto" > {Array(count) .fill(0) .map((_, index) => ( <Card key={index}> <CardHeader> <Heading size="md">俺を誰だと思っていやがるッ!!</Heading> </CardHeader> <CardBody> <Text> 『天元突破グレンラガン』は、ガイナックス・アニプレックス・コナミデジタルエンタテインメント製作の日本のロボットアニメ作品。 </Text> <Text> 作品名の「天元」とは、万物生育の根源という意味があり、また囲碁の用語では碁盤の中央（中心）を指す。劇中のキーワードにも螺旋、ドリル、回転など、中央・中心に関連するものが多く見られ、中央突破、王道路線を念頭に置いた作品名といえる。 </Text> </CardBody> </Card> ))} {!isFinish ? ( <Center ref={ref} w="full"> <Loading fontSize="2xl" /> </Center> ) : null} </Container> <Button onClick={() => resetRef.current()}>Reset</Button> </VStack> )
Set rootMargin
To set rootMargin, assign a string to rootMargin.
Editable example
const [count, setCount] = useState<number>(50) const { ref, isFinish } = useInfiniteScroll({ onLoad: ({ index, finish }) => { console.log("onLoad", index) setCount((prev) => prev + 50) if (index >= 5) finish() }, rootMargin: "300px 0px 0px 0px", }) return ( <VStack> {Array(count) .fill(0) .map((_, index) => ( <Card key={index}> <CardHeader> <Heading size="md">俺を誰だと思っていやがるッ!!</Heading> </CardHeader> <CardBody> <Text> 『天元突破グレンラガン』は、ガイナックス・アニプレックス・コナミデジタルエンタテインメント製作の日本のロボットアニメ作品。 </Text> <Text> 作品名の「天元」とは、万物生育の根源という意味があり、また囲碁の用語では碁盤の中央（中心）を指す。劇中のキーワードにも螺旋、ドリル、回転など、中央・中心に関連するものが多く見られ、中央突破、王道路線を念頭に置いた作品名といえる。 </Text> </CardBody> </Card> ))} {!isFinish ? ( <Center ref={ref} w="full"> <Loading fontSize="2xl" /> </Center> ) : null} </VStack> )
Set threshold
To set threshold, assign a number to threshold.
Editable example
const [count, setCount] = useState<number>(50) const { ref, isFinish } = useInfiniteScroll({ onLoad: ({ index, finish }) => { console.log("onLoad", index) setCount((prev) => prev + 50) if (index >= 5) finish() }, threshold: 1, }) return ( <VStack> {Array(count) .fill(0) .map((_, index) => ( <Card key={index}> <CardHeader> <Heading size="md">俺を誰だと思っていやがるッ!!</Heading> </CardHeader> <CardBody> <Text> 『天元突破グレンラガン』は、ガイナックス・アニプレックス・コナミデジタルエンタテインメント製作の日本のロボットアニメ作品。 </Text> <Text> 作品名の「天元」とは、万物生育の根源という意味があり、また囲碁の用語では碁盤の中央（中心）を指す。劇中のキーワードにも螺旋、ドリル、回転など、中央・中心に関連するものが多く見られ、中央突破、王道路線を念頭に置いた作品名といえる。 </Text> </CardBody> </Card> ))} {!isFinish ? ( <Center ref={ref} w="full"> <Loading fontSize="2xl" /> </Center> ) : null} </VStack> )
Load Initially
To load initially, set initialLoad to true. By default, initialLoad is set to false, and the onLoad for the first time (index=0) is not executed.
true: Regardless of the scroll amount, the first onLoad is executed, and the provided index starts from 0.
false: onLoad is executed when the scroll reaches a certain amount, and the provided index starts from 1.
Editable example
const [count, setCount] = useState<number>(0) const { ref, isFinish } = useInfiniteScroll({ onLoad: ({ index, finish }) => { console.log("onLoad", index) setCount((prev) => prev + 50) if (index >= 5) finish() }, initialLoad: true, }) return ( <VStack> {Array(count) .fill(0) .map((_, index) => ( <Card key={index}> <CardHeader> <Heading size="md">俺を誰だと思っていやがるッ!!</Heading> </CardHeader> <CardBody> <Text> 『天元突破グレンラガン』は、ガイナックス・アニプレックス・コナミデジタルエンタテインメント製作の日本のロボットアニメ作品。 </Text> <Text> 作品名の「天元」とは、万物生育の根源という意味があり、また囲碁の用語では碁盤の中央（中心）を指す。劇中のキーワードにも螺旋、ドリル、回転など、中央・中心に関連するものが多く見られ、中央突破、王道路線を念頭に置いた作品名といえる。 </Text> </CardBody> </Card> ))} {!isFinish ? ( <Center ref={ref} w="full"> <Loading fontSize="2xl" /> </Center> ) : null} </VStack> )
Change the Starting index
To change the starting index, assign a number to startIndex. The default is 1.
Editable example
const [count, setCount] = useState<number>(50) const { ref, isFinish } = useInfiniteScroll({ onLoad: async ({ index, finish }) => { console.log("onLoad", index) setCount((prev) => prev + 50) if (index >= 5) finish() }, startIndex: 3, }) return ( <VStack> {Array(count) .fill(0) .map((_, index) => ( <Card key={index}> <CardHeader> <Heading size="md">俺を誰だと思っていやがるッ!!</Heading> </CardHeader> <CardBody> <Text> 『天元突破グレンラガン』は、ガイナックス・アニプレックス・コナミデジタルエンタテインメント製作の日本のロボットアニメ作品。 </Text> <Text> 作品名の「天元」とは、万物生育の根源という意味があり、また囲碁の用語では碁盤の中央（中心）を指す。劇中のキーワードにも螺旋、ドリル、回転など、中央・中心に関連するものが多く見られ、中央突破、王道路線を念頭に置いた作品名といえる。 </Text> </CardBody> </Card> ))} {!isFinish ? ( <Center ref={ref} w="full"> <Loading fontSize="2xl" /> </Center> ) : null} </VStack> )
Reverse
To reverse, set isReverse to true. The default is false.
Editable example
const rootRef = useRef<HTMLDivElement>(null) const [count, setCount] = useState<number>(50) const { ref, isFinish } = useInfiniteScroll({ onLoad: async ({ index, finish }) => { console.log("onLoad", index) setCount((prev) => prev + 50) if (index >= 5) finish() }, rootRef, isReverse: true, }) return ( <VStack ref={rootRef} h="full" overflow="auto"> {!isFinish ? ( <Center ref={ref} w="full"> <Loading fontSize="2xl" /> </Center> ) : null} {Array(count) .fill(0) .map((_, index) => ( <Card key={index}> <CardHeader> <Heading size="md">俺を誰だと思っていやがるッ!!</Heading> </CardHeader> <CardBody> <Text> 『天元突破グレンラガン』は、ガイナックス・アニプレックス・コナミデジタルエンタテインメント製作の日本のロボットアニメ作品。 </Text> <Text> 作品名の「天元」とは、万物生育の根源という意味があり、また囲碁の用語では碁盤の中央（中心）を指す。劇中のキーワードにも螺旋、ドリル、回転など、中央・中心に関連するものが多く見られ、中央突破、王道路線を念頭に置いた作品名といえる。 </Text> </CardBody> </Card> ))} </VStack> )
Edit this page on GitHub