InfiniteScrollArea

InfiniteScrollArea is a component that provides infinite scrolling functionality. This component offers a smooth scrolling experience by automatically loading and displaying the next dataset when the end of the component is reached.

const [count, setCount] = useState<number>(50)

return (
  <InfiniteScrollArea
    p="lg"
    loading={<Loading.Oval fontSize="2xl" />}
    onLoad={({ finish, index }) => {
      console.log("load", index)
      setCount((prev) => prev + 50)
      if (index >= 5) finish()
    }}
  >
    {Array(count)
      .fill(0)
      .map((_, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="xl">天元突破グレンラガン</Heading>
          </Card.Header>

          <Card.Body>
            <Text>
              いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
            </Text>
          </Card.Body>
        </Card.Root>
      ))}
  </InfiniteScrollArea>
)

If you use this code, you need to add "use client" to the top of the file.

Usage

import { InfiniteScrollArea } from "@yamada-ui/react"

import { InfiniteScrollArea } from "@/components/ui"

import { InfiniteScrollArea } from "@workspace/ui"

<InfiniteScrollArea />

Specify the Viewport

To specify the viewport, set a ref to rootRef.

If rootRef is not set, the browser's viewport will be used.

const rootRef = useRef<HTMLDivElement>(null)
const [count, setCount] = useState<number>(50)
const resetRef = useRef<() => void>(noop)

return (
  <VStack h="full" alignItems="flex-start" p="lg">
    <VStack
      ref={rootRef}
      borderWidth="1px"
      flex="1"
      p="lg"
      rounded="l2"
      overflowY="auto"
    >
      <InfiniteScrollArea
        loading={<Loading.Oval fontSize="2xl" />}
        resetRef={resetRef}
        rootRef={rootRef}
        onLoad={({ finish, index }) => {
          console.log("load", index)
          setCount((prev) => prev + 50)
          if (index >= 5) finish()
        }}
      >
        {Array(count)
          .fill(0)
          .map((_, index) => (
            <Card.Root key={index}>
              <Card.Header>
                <Heading size="xl">天元突破グレンラガン</Heading>
              </Card.Header>

              <Card.Body>
                <Text>
                  いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
                </Text>
              </Card.Body>
            </Card.Root>
          ))}
      </InfiniteScrollArea>
    </VStack>

    <Button
      onClick={() => {
        setCount(50)
        resetRef.current()
      }}
    >
      Reset
    </Button>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Set rootMargin

To set rootMargin, assign a string to rootMargin.

const [count, setCount] = useState<number>(50)

return (
  <InfiniteScrollArea
    p="lg"
    rootMargin="0px 0px 300px 0px"
    loading={<Loading.Oval fontSize="2xl" />}
    onLoad={({ finish, index }) => {
      console.log("load", index)
      setCount((prev) => prev + 50)
      if (index >= 5) finish()
    }}
  >
    {Array(count)
      .fill(0)
      .map((_, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="xl">天元突破グレンラガン</Heading>
          </Card.Header>

          <Card.Body>
            <Text>
              いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
            </Text>
          </Card.Body>
        </Card.Root>
      ))}
  </InfiniteScrollArea>
)

If you use this code, you need to add "use client" to the top of the file.

Set threshold

To set threshold, assign a number to threshold.

const [count, setCount] = useState<number>(50)

return (
  <InfiniteScrollArea
    p="lg"
    threshold={1}
    loading={<Loading.Oval fontSize="2xl" />}
    onLoad={({ finish, index }) => {
      console.log("load", index)
      setCount((prev) => prev + 50)
      if (index >= 5) finish()
    }}
  >
    {Array(count)
      .fill(0)
      .map((_, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="xl">天元突破グレンラガン</Heading>
          </Card.Header>

          <Card.Body>
            <Text>
              いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
            </Text>
          </Card.Body>
        </Card.Root>
      ))}
  </InfiniteScrollArea>
)

If you use this code, you need to add "use client" to the top of the file.

Initial Load

To load initially, set initialLoad to true. By default, initialLoad is set to false, and the initial(index=0) onLoad is not executed.

true: The first onLoad is executed regardless of the scroll amount, and the provided index starts from 0.
false: onLoad is executed when a certain scroll is reached, and the provided index starts from 1.

const [count, setCount] = useState<number>(50)

return (
  <InfiniteScrollArea
    p="lg"
    initialLoad
    loading={<Loading.Oval fontSize="2xl" />}
    onLoad={({ finish, index }) => {
      console.log("load", index)
      setCount((prev) => prev + 50)
      if (index >= 5) finish()
    }}
  >
    {Array(count)
      .fill(0)
      .map((_, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="xl">天元突破グレンラガン</Heading>
          </Card.Header>

          <Card.Body>
            <Text>
              いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
            </Text>
          </Card.Body>
        </Card.Root>
      ))}
  </InfiniteScrollArea>
)

If you use this code, you need to add "use client" to the top of the file.

Change the Starting index

To change the starting index, set a number to startIndex. The default is 1.

const [count, setCount] = useState<number>(50)

return (
  <InfiniteScrollArea
    p="lg"
    startIndex={3}
    loading={<Loading.Oval fontSize="2xl" />}
    onLoad={({ finish, index }) => {
      console.log("load", index)
      setCount((prev) => prev + 50)
      if (index >= 5) finish()
    }}
  >
    {Array(count)
      .fill(0)
      .map((_, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="xl">天元突破グレンラガン</Heading>
          </Card.Header>

          <Card.Body>
            <Text>
              いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
            </Text>
          </Card.Body>
        </Card.Root>
      ))}
  </InfiniteScrollArea>
)

If you use this code, you need to add "use client" to the top of the file.

Change the Orientation

To change the orientation, set orientation to either "vertical" or "horizontal". The default is "vertical".

const [count, setCount] = useState<number>(50)

return (
  <InfiniteScrollArea
    p="lg"
    orientation="horizontal"
    loading={<Loading.Oval fontSize="2xl" />}
    onLoad={({ finish, index }) => {
      console.log("load", index)
      setCount((prev) => prev + 50)
      if (index >= 5) finish()
    }}
  >
    {Array(count)
      .fill(0)
      .map((_, index) => (
        <Image
          borderWidth="1px"
          rounded="l2"
          key={index}
          src="https://gurren-lagann15th.com/assets/img/top/visual.jpg"
          w="sm"
          h="full"
          objectFit="cover"
        />
      ))}
  </InfiniteScrollArea>
)

If you use this code, you need to add "use client" to the top of the file.

Reverse

To reverse, set reverse to true. The default is false.

const [count, setCount] = useState<number>(50)

return (
  <InfiniteScrollArea
    p="lg"
    reverse
    loading={<Loading.Oval fontSize="2xl" />}
    onLoad={({ finish, index }) => {
      console.log("load", index)
      setCount((prev) => prev + 50)
      if (index >= 5) finish()
    }}
  >
    {Array(count)
      .fill(0)
      .map((_, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="xl">天元突破グレンラガン</Heading>
          </Card.Header>

          <Card.Body>
            <Text>
              いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
            </Text>
          </Card.Body>
        </Card.Root>
      ))}
  </InfiniteScrollArea>
)

If you use this code, you need to add "use client" to the top of the file.

Disable

To disable, set disabled to true. This is useful when you do not want to execute onLoad in response to scrolling under certain conditions.

const [disabled, setDisabled] = useState<boolean>(false)
const [count, setCount] = useState<number>(50)

return (
  <VStack h="full" alignItems="flex-start" p="lg">
    <InfiniteScrollArea
      disabled={disabled}
      loading={<Loading.Oval fontSize="2xl" />}
      onLoad={({ finish, index }) => {
        console.log("load", index)
        setCount((prev) => prev + 50)
        if (index >= 5) finish()
      }}
      borderWidth="1px"
      flex="1"
      p="lg"
      rounded="l2"
    >
      {Array(count)
        .fill(0)
        .map((_, index) => (
          <Card.Root key={index}>
            <Card.Header>
              <Heading size="xl">天元突破グレンラガン</Heading>
            </Card.Header>

            <Card.Body>
              <Text>
                いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
              </Text>
            </Card.Body>
          </Card.Root>
        ))}
    </InfiniteScrollArea>

    <Button
      colorScheme={disabled ? "success" : "danger"}
      onClick={() => setDisabled((prev) => !prev)}
    >
      {disabled ? "Enable" : "Disabled"}
    </Button>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Reset

To reset the index, set a ref to resetRef. A callback function is attached to the set ref, so execute it.

Executing the resetRef callback will also reset the scroll.

const resetRef = useRef<() => void>(noop)
const [count, setCount] = useState<number>(50)

return (
  <VStack h="full" alignItems="flex-start" p="lg">
    <InfiniteScrollArea
      resetRef={resetRef}
      loading={<Loading.Oval fontSize="2xl" />}
      onLoad={({ finish, index }) => {
        console.log("load", index)
        setCount((prev) => prev + 50)
        if (index >= 5) finish()
      }}
      borderWidth="1px"
      flex="1"
      p="lg"
      rounded="l2"
    >
      {Array(count)
        .fill(0)
        .map((_, index) => (
          <Card.Root key={index}>
            <Card.Header>
              <Heading size="xl">天元突破グレンラガン</Heading>
            </Card.Header>

            <Card.Body>
              <Text>
                いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
              </Text>
            </Card.Body>
          </Card.Root>
        ))}
    </InfiniteScrollArea>

    <Button
      onClick={() => {
        setCount(50)
        resetRef.current()
      }}
    >
      Reset
    </Button>
  </VStack>
)

If you use this code, you need to add "use client" to the top of the file.

Display an Element at the End of the Scroll

To display an element at the end of the scroll, set a ReactNode to finish.

const [count, setCount] = useState<number>(50)

return (
  <InfiniteScrollArea
    p="lg"
    finish={<>俺のドリルは！天を作るドリルだああああっ！！</>}
    loading={<Loading.Oval fontSize="2xl" />}
    onLoad={({ finish, index }) => {
      console.log("load", index)
      setCount((prev) => prev + 50)
      if (index >= 1) finish()
    }}
  >
    {Array(count)
      .fill(0)
      .map((_, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="xl">天元突破グレンラガン</Heading>
          </Card.Header>

          <Card.Body>
            <Text>
              いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
            </Text>
          </Card.Body>
        </Card.Root>
      ))}
  </InfiniteScrollArea>
)

If you use this code, you need to add "use client" to the top of the file.

Customize the Trigger

To customize the trigger, set props to triggerProps.

const [count, setCount] = useState<number>(50)

return (
  <InfiniteScrollArea
    p="lg"
    triggerProps={{ colorScheme: "red" }}
    loading={<Loading.Oval fontSize="2xl" />}
    onLoad={async ({ finish, index }) => {
      console.log("load", index)
      await wait(5000)
      setCount((prev) => prev + 50)
      if (index >= 5) finish()
    }}
  >
    {Array(count)
      .fill(0)
      .map((_, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="xl">天元突破グレンラガン</Heading>
          </Card.Header>

          <Card.Body>
            <Text>
              いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
            </Text>
          </Card.Body>
        </Card.Root>
      ))}
  </InfiniteScrollArea>
)

If you use this code, you need to add "use client" to the top of the file.

Customize the Loading

To customize the loading, set a ReactNode to loading.

const [count, setCount] = useState<number>(50)

return (
  <InfiniteScrollArea
    p="lg"
    loading={<>一回転すればほんの少しだけ前に進む、それがドリルなんだよ！！</>}
    onLoad={async ({ finish, index }) => {
      console.log("load", index)
      await wait(5000)
      setCount((prev) => prev + 50)
      if (index >= 5) finish()
    }}
  >
    {Array(count)
      .fill(0)
      .map((_, index) => (
        <Card.Root key={index}>
          <Card.Header>
            <Heading size="xl">天元突破グレンラガン</Heading>
          </Card.Header>

          <Card.Body>
            <Text>
              いいか、忘れんな。お前を信じろ。俺が信じるお前でもない。お前が信じる俺でもない。お前が信じる…お前を信じろ！
            </Text>
          </Card.Body>
        </Card.Root>
      ))}
  </InfiniteScrollArea>
)

If you use this code, you need to add "use client" to the top of the file.

Props

Prop	Default	Type / Description
`as`	-	`As` The HTML element to render.
`asChild`	-	`boolean` Merges its props onto its immediate child.
`css`	-	`CSSObject \| CSSObject[]` The CSS object.
`colorScheme`	-	`"amber" \| "black" \| "blackAlpha" \| "blue" \| "cyan" \| "danger" \| "emerald" \| "error" \| "flashy" \| "fuchsia" ...` Set color scheme variables.
`behavior`	-	`ScrollBehavior` Determines whether scrolling is instant or animates smoothly.
`disabled`	`false`	`boolean` If `true`, the infinite scroll is disabled.
`finish`	-	`ReactNode` The infinite scroll area finish to use.
`indexRef`	-	`RefObject<(index: number) => void>` Ref to a reset index function.
`initialLoad`	`false`	`boolean` If `true`, invoke `onLoad` function for the first time.
`loading`	-	`ReactNode` The infinite scroll area loading to use.
`onLoad`	-	`({ entry, finish, index }: { index: number; finish: () => void; entry?: IntersectionObserverEntry \| undefined }) => void \| Promise<void>` The callback invoked when trigger is intersect.
`resetRef`	-	`RefObject<(index?: number \| undefined, runScroll?: boolean \| undefined) => void>` Ref to a reset function.
`reverse`	`false`	`boolean` If `true`, reverse direction.
`rootMargin`	-	`string` Margin around the root. Can have values similar to the CSS margin property, e.g. "10px 20px 30px 40px" (top, right, bottom, left).
`rootRef`	-	`RefObject<HTMLElement \| null>` The element that is used as the viewport for checking visibility of the target. Defaults to the browser viewport if not specified or if `null`.
`startIndex`	`1`	`number` If set the `onLoad` function will start from the given index. If `initialLoad` is `true`, index starts from `0`.
`threshold`	-	`number \| number[]` Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed.
`triggerProps`	-	`HTMLStyledProps` Props for infinite scroll area trigger component.

Similar Components

Carousel is a component that displays multiple elements like a slideshow.

ScrollArea is a component that displays a customized scrollbar.

Breadcrumb is a component that helps users understand the hierarchy of a website.

DataList is used to display a list of data items.

List is a component for displaying lists. By default, it renders a ul element.

NativeAccordion is a component for a list that displays information in an expandable or collapsible manner using the HTML details element.

Reorder is a component that allows you to change the order of items using drag and drop.

Uses Components & Hooks

useValue is a custom hook that combines useBreakpointValue and useColorModeValue.