reactjs – How to add reverse-scroll in React while using react-virtualized with InfiniteLoader for loading messages?

You can do something like this, you can replace items by chat in your application. Let me know if you have more questions

import { useEffect, useRef, useCallback, useState } from "react"

const InfiniteScrollComponent = () => {
  const [items, setItems] = useState([])
  const [page, setPage] = useState(1) // Page state to handle pagination
  const loaderRef = useRef(null)

  // Function to load more items
  const loadMore = async () => {
    try {
      const response = await fetch(
        `https://dummyjson.com/products?limit=10&skip=${(page - 1) * 10}`
      )
      const data = await response.json()
      setItems((prevItems) => [...prevItems, ...data.products])
      setPage((prevPage) => prevPage + 1)
    } catch (error) {
      console.error("Error fetching data:", error)
    }
  }

  const observerCallback = useCallback(
    (entries) => {
      const target = entries[0]
      if (target.isIntersecting) {
        loadMore()
      }
    },
    [page]
  )

  useEffect(() => {
    const observer = new IntersectionObserver(observerCallback, {
      root: null,
      rootMargin: "500px",
      threshold: 0.1,
    })

    if (loaderRef.current) {
      observer.observe(loaderRef.current)
    }

    return () => {
      if (loaderRef.current) {
        observer.unobserve(loaderRef.current)
      }
    }
  }, [observerCallback])

  return (
    

      {items.map((item, index) => (
        

          
{item.title}
          
{item.description}
        
      ))}
      
    
  )
}

export default InfiniteScrollComponent