How do i use it with Modals? about react-infinite-scroll-component

[mislavmiocevic]

@igorarkhipenko

Maybe this example will help you.
It was based on callback ref:
https://reactjs.org/docs/hooks-faq.html#how-can-i-measure-a-dom-node

Tested with React 17 and react-infinite-scroll-component 6.

import { render } from "react-dom";
import React, { useCallback, useState } from "react";
import InfiniteScroll from "react-infinite-scroll-component";

const InfiniteScrollComponent = () => {
  const [items, setItems] = useState(Array.from({ length: 30 }));

  const listItems = items.map((_, index) => <div key={index}>{index}</div>);

  const [listItemsContainerRef, setListItemsContainerRef] = useState();

  const onlistItemsContainerRefChange = useCallback((node) => {
    if (node !== null) {
      setListItemsContainerRef(node);
    }
  }, []);

  return (
    <div
      style={{
        height: "300px",
        // height: 'calc(100vh - 100px)', // this works also
        display: "flex",
        flexDirection: "column",
        background: "lightyellow"
      }}
    >
      <div style={{ padding: "20px", background: "lightblue" }}>Header</div>

      <div ref={onlistItemsContainerRefChange} style={{ overflow: "auto" }}>
        {listItemsContainerRef && (
          <InfiniteScroll
            dataLength={listItems.length}
            next={() => {
              window.setTimeout(() => {
                setItems((prevItems) => [
                  ...prevItems,
                  ...Array.from({ length: 30 })
                ]);
              }, 1500);
            }}
            hasMore={true}
            loader={<p style={{ color: "red" }}>...loading</p>}
            scrollableTarget={listItemsContainerRef}
          >
            {listItems}
          </InfiniteScroll>
        )}
      </div>
    </div>
  );
};

const App = () => {
  const [visible, setVisible] = useState(false); // faking modal show

  return (
    <div>
      <button onClick={() => setVisible(true)}>show</button>
      <button onClick={() => setVisible(false)}>hide</button>

      {visible && <InfiniteScrollComponent />}
    </div>
  );
};

render(<App />, document.getElementById("root"));

[fabioimpe]

Thank you, in the meantime I found a workaround, I tried to set a fixed height to the InfiniteScroll component and it started to work also in the modals, in my case I set it as window.innerHeight, just because my modal is fullscreen.

[ankeetmaini]

Yes, that'll always work, if you pass height to InfiniteScroll component.

…

On Mon, 9 Apr 2018 at 16:16 Fabio ***@***.***> wrote: Thank you, in the meantime I found a workaround, I tried to set a fixed height to the InfiniteScroll component and it started to work also in the modals, in my case I set it as window.innerHeight, just because my modal is fullscreen. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#29 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGWDlzNJq9ffQYbULFsRVZA7sFjQYntnks5tmzwSgaJpZM4O4k4R> .

[AbdulMoiz96]

import React, {useCallback, useState} from "react"
import InfiniteScroll from "react-infinite-scroller"
import {Table} from "antd"

const ScrollableTable = props => {
    
    const outerDivStyle = {height: '500px', overflow: 'auto'}
    const [tableContainerRef, setTableContainerRef] = useState()

    const onTableContainerRefChange = useCallback(node => {
        if (node !== null) {
            setTableContainerRef(node)
        }
    }, [])

    const fetchData = () => {
        // Fetch your data here. 
    }

return <div className="w-100" style={outerDivStyle} ref={onTableContainerRefChange}>
          <InfiniteScroll
              hasMore={true}
              initialLoad={false}
              loadMore={fetchData}
              useWindow={false}
              scrollableTarget={tableContainerRef}
          >
              <Table {...props}/> 
        </InfiniteScroll>
</div>

@martin-landhi, as @mislavmiocevic suggested, the above code works for me.

The additional thing I did, was just added useWindow={false}.

[thudaohd]

i have same issue. is there any solution?

[atharhashmi]

@AbdulMoiz96 Awesome! This solved a major issue for us that we were struggling with for quite some time...

[supuwoerc]

Although I passed height to fix the problem, strangely enough, my code executed normally in the development environment, build deployment to the production environment only found this error, I looked at the source code, against the window binding event to locate the error, too strange, I do not understand why the development environment is normal...

[fabioimpe]

+1
I'm trying to use it in a modal component, but even passing the reference of the container with the scrollableTarget property, the next function is not triggered...
@ankeetmaini any help please?

[ankeetmaini]

Hi guys, this is because the parent Modal renders when the child (InfiniteScroll) renders. So when InfiniteScroll renders and its componentDidMount is called the parent's ref is null. So the event listeners are set at window, but in case of Modal the window doesn't scroll. I'm working at a fix, I'll post my solution let me know if you like it.

…

On Mon, 9 Apr 2018 at 14:00 Fabio ***@***.***> wrote: +1 I'm trying to use it in a modal component, but even passing the reference of the container with the *scrollableTarget* property, the *next* function is not triggered... @ankeetmaini <https://github.com/ankeetmaini> any help please? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#29 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AGWDl2TwHoi3ubwZg0BfxPc1RRb7R86Lks5tmxwJgaJpZM4O4k4R> .

[igorarkhipenko]

@ankeetmaini Hey, did you ever find a solution for it? I'm having the same issue but the height of Modal component is not known before it gets rendered. I wonder if there's a way to use InfiniteScroll inside that in this case? Thanks.

[martin-landhi]

@ankeetmaini coud you find a solution to that isssue?

[supuwoerc]

Although I passed height to fix the problem, strangely enough, my code executed normally in the development environment, build deployment to the production environment only found this error, I looked at the source code, against the window binding event to locate the error, too strange, I do not understand why the development environment is normal...

I found the reason. It's something I did with the ui lib，ant-design/ant-design#43508