CODEWITHSUNDEEP
javascriptreactjsfunctional-programmingpaginationreact-functional-component
mr geek
mr geek

Reputation: 87

ReactJs Functional Component Get When Scroll Reached End

I have a functional component in ReactJs and want to add pagination to my page so that when the user reaches end of the screen, I'd get the rest of the data from Api. my code looks like this:

 <div
      className="MyOrdersHistory-list-container">
      {ordersList.map((order, index) => (
        <div key={index} className="MyOrdersHistory-listItem-container">
          ........
        </div>
      ))}
    </div>

How can I figure out when use scrolls to the end of the page to fire the Api request. (If possible please give a functional component example not a class one) Thanks

Upvotes: 1

Views: 681

Answers (1)

ZaO Lover
ZaO Lover

Reputation: 433

import React, { useRef, useEffect } from 'react';

const <YourComponent> = () => {
  const list = useRef();

  const onScroll = () => {
    if (list.current) {
      const { scrollTop, scrollHeight, clientHeight } = list.current;
      if (scrollTop + clientHeight === scrollHeight) {
        // DO SOMETHING WHAT YOU WANT
      }
    }
  };

  ...

  <div
    onScroll={() => onScroll()} ref={list}
    className="MyOrdersHistory-list-container">
    {ordersList.map((order, index) => (
      <div key={index} className="MyOrdersHistory-listItem-container">
        ........
      </div>
    ))}
  </div>

Upvotes: 3

Related Questions