ankeetmaini / react-infinite-scroll-component Goto Github PK
View Code? Open in Web Editor NEWAn awesome Infinite Scroll component in react.
Home Page: https://react-infinite-scroll-component.netlify.com/
License: MIT License
An awesome Infinite Scroll component in react.
Home Page: https://react-infinite-scroll-component.netlify.com/
License: MIT License
Next is not hitting fetchMoreData function. It is only hitting once even dataLength is 3. Can you help me with this issue
height = { 300 } may be only use unit 'px' , I mean height = { 80% } , it will be helpful
Hi,
I would like to use this on a large list of static/offline data. However, I have been unable to implement it. Basically, I want it to only get say 100 results from the map at this.state.demoData
. Then once I reach the refresh point, it should get 100 more results.
I am wanting to use infinite scroll to improve performance (as the list will be long, and have a lot of data in it such as images )
I have not been able to implement it. I put this in a codeSandBox https://codesandbox.io/s/xvlR245VE
Here is my code:
class App extends React.Component {
constructor() {
super();
this.state = {
demoData: x.demoData,
};
}
generateDivs = () => {
let moreDivs = [];
let count = this.state.demoData.length;
for (let i = 0; i < 30; i++) {
moreDivs.push(
this.state.demoData.map(e => {
<span key={e.id}> {e.name} </span>
}));
}
}
render() {
return (
<div style={{overflow: 'auto', maxHeight: 500}}>
test
<InfiniteScroll
next={this.generateDivs}
hasMore={true}
loader={<h1>Loading...</h1>}>
{this.state.demoData}
</InfiniteScroll>
</div>
);
}
}
I've also put it in a code sandbox:
How can i use this component on mobile devices? When I use this component I can't scroll any element on the phone browsers
Please check
get the error:
Uncaught TypeError: Cannot read property 'style' of null,
It is this line from the source code of index.js:
_this._infScroll.style.overflow = 'auto';
I'm using your package on a large touchscreen and I'd rather not see scroll bars but I don't see a way to override your overflow: auto style
Is there a way to remove throttle? When we scroll fast the events are not captured & results in lagging behavior.
I'm getting this error when compiling:
Error: Cannot find module './factoryWithTypeCheckers' from '.../node_modules/react-infinite-scroll-component/lib'
I'm using react 16.6
Any help is appreciated
First, thanks for the component is very handy!
I have a question, in my use case, I render as children of the component embedded tweets using this library: https://github.com/capaj/react-tweet-embed.
I am having a problem, the "next" is called multiple times and way before the 80%, I am pretty sure that is because the embedded tweets are created after the first rendering happened, so the height when the full view is rendered is way different than the initial one.
Is there a way to avoid this problem? Maybe forcing a re-calc on the component?
Curerntly when I reach the bottom in the component it triggers the next
method which is perfect. However while the loader is still being shown (aka the data is not yet finished fetching), the next
method triggers again.
I believe that the next
method should have a simple state key which could be isWaiting
. This would be true if the Loader
is being shown.
For my view I need to use a element/module to show my list of results using the overflow-y:scroll style. However, scrolling to the bottom of the element does not trigger a load event. Any suggestions?
Great library that actually works! I realized no other React.js infinite scroll components support both pull down to refresh and pull up to load more, if this can be implemented as well, it could be make this library a killer!
Hi,
I am developing with the dev tools open and "toggle device toolbar" on (to display the viewport as a mobile device. (Also, I'm using scrollableTarget
).
With this setup, next
is never firing. i.e. the following is always returning false
:
isElementAtBottom (target, scrollThreshold = 0.8) {
const clientHeight = (target === document.body || target === document.documentElement)
? window.screen.availHeight : target.clientHeight;
const scrolled = scrollThreshold * (target.scrollHeight - target.scrollTop);
return scrolled * (window.devicePixelRatio || 1) <= clientHeight;
}
Can you please confirm that this is an issue (and that I'm not using the component improperly)?
If you'd like the change, I can look into exposing isElementAtBottom
as a property (shouldn't be hard to do but I haven't really looked at all the code).
Thank you
I have a proposal for the new feature.
It would be nice if the component had an option to infinite scroll in both directions.
It would be useful on timelines where you start in the middle. For example when you want to show present, but also want to be able to scroll into the past or future.
I do as shown in the example, but says it wants to component was
<InfiniteScroll
pullDownToRefresh
pullDownToRefreshContent={<h3 style={{textAlign: 'center'}}>↓ Pull down to refresh</h3>}
releaseToRefreshContent={<h3 style={{textAlign: 'center'}}>↑ Release to refresh</h3>}
refreshFunction={this.refresh}
next={this.generateDivs}
hasMore={true}
loader={<h4>Loading...</h4>}>
{[
<div key={2} style={{height: 200, background: '#ffd47b'}}>Div no 2</div>,
<div key={1} style={{height: 200, background: '#9bc95b'}}>Div no 1</div>,
<div key={3} style={{height: 200, background: '#95a9d6'}}>Div no 3</div>,
<div key={4} style={{height: 200, background: '#ffa8e1'}}>Div no 4</div>,
<div key={5} style={{height: 200, background: '#9bc95b'}}>Div no 5</div>,
<div key={6} style={{height: 200, background: '#ffd47b'}}>Div no 6</div>,
<div key={7} style={{height: 200, background: '#95a9d6'}}>Div no 7</div>,
<div key={8} style={{height: 200, background: '#ffa8e1'}}>Div no 8</div>,
]}
</InfiniteScroll>
# I copied this example all exactly the same error
https://github.com/ankeetmaini/react-infinite-scroll-component/blob/master/demos/height.js
Currently, the code references window
directly, see this and this.
This breaks server side rendering since window
is undefined. This can be fixed by using something like https://www.npmjs.com/package/window-or-global.
Hi
I used your component and when I scroll down it worked fine once
but at the second time I should scroll up and down to perform loading data
and it doesn't work if I just scroll down
Keeping examples upto date is hard with no scripts setup etc.
Codesandbox is a great way to give users to play with the code and show live examples. There can be multiple examples showing all the aspects of the component.
I just wanted to hide the endMessage but doing so it not intuitive, setting it to ''
, false
or null
just shows the default, you have to set it to ' '
to actually hide the message when you don't want to show anything (including the cute default).
I really like the pull-down functionality a lot, however when webapps are added to a home screen and you pull down to refresh inside the react element you also get the circle of the webbrowser (see picture below).
Suggested workarounds (not tested)
Maybe add it to the readme or docs? :)
Proptypes brings in around 3k baggage. It'd be nice if the component stripped proptypes from production build. See https://www.npmjs.com/package/babel-plugin-transform-react-remove-prop-types
Hi @ankeetmaini, I'm using your component for a plugin I'm building and I can say that so far it's much better than most of the other React infinite scrollers I've tried so thank you!
My only issue is that the application that my plugin will be displayed in never scrolls on document.body, it uses a scrollable container div for displaying content inside. Because of this, if I don't use the height
prop, next
never triggers. If I do use height
then everything works except that the user now has two sets of scroll bars, one on the applications scrollable container and one on the infinite scroll component. This is a bit of an ugly experience so I was wondering if there's any way of setting the target scrollable container to a particular element? That way next
could be trigger when then user scrolls to the bottom of the application's scrollable container. Hope that makes sense!
Hi, i was having trouble while using infinite scrolling, because data was being loaded when my browsers main window scrollbar scrolled. So i tried using scrollableTarget to fix the problem, but when i tried using it the loader keeps displaying and no data is fetched. Code looks like this:
<Container id="divID">
<InfiniteScroll
dataLength={this.state.logs.length}
next={this.fetchMoreData}
hasMore={true}
loader={<Loader />}
scrollableTarget="divID"
>
<Table striped>
<thead>
<tr>
<th>...</th>
<th>...</th>
<th>...</th>
</tr>
</thead>
<tbody>
{this.state.logs.map(event => (
<tr key={event.id}>
<td>....</td>
<td>....</td>
<td>....</td>
</tr>
))}
</tbody>
</Table>
</InfiniteScroll>
</Container>
Here you can see the id of Container
I Also tried using scrollableTarget=document.getElementById("divID")
and it now renders the content but it only loads more data when the main window scrollbar moves not when the one in my Table element does.
I've got an app with a potentially-large tree-list, e.g.
Where parent items can be expanded and collapsed by the user, and child items may in turn have their own children. I'm trying to utilize react-infinite-scroll-component
to improve the performance of the initial rendering of this tree, but have run into strange behavior when the InfiniteScroll components are nested.
See https://codesandbox.io/s/p75kz97j87
If the "MegaList" button is selected, you'll start out with 5 parent elements each with 5 children. You can clearly see the end of the "Parent Number 1" child list, but it doesn't advance that list until you've scrolled down far enough that the outer list decides to load "Parent Number 6". At that point if you scroll back up, you'll see that "Parent Number 1" has loaded 10 children. You can bounce back and forth between the bottom and the top of the page to get it to load more child elements, but obviously this is not intended behavior.
I'd expect "Parent Number 1" to load its children as I scroll, so that I don't see "Parent Number 2" until all of the "Parent Number 1" child elements have loaded.
This might be somewhat related to #47 - you'll notice if you click the "InnerList" or "OuterList" buttons, you'll get a UI with 5 child elements, but it should be InfiniteScrolling to reveal up to 100. If you make the window short enough to have a scrollbar, you can get them to load more by scrolling.
Hi,
I am getting an issue as I need to pass width to the outer div . Is there any way to pass ?
Thanks.,
This causes to refresh the screen even if user is at the bottom and tries to scroll up. Happens only if pullDownToRefresh is enabled
the next
callback seems to be called only after a scroll down event. if the page isn't full and I cannot scroll down to the bottom (cause I already reached it), then the loader
is displayed, but the next
callback doesn't get called. this is obvious when you start the component with no children.
I need an ability to store the current scroll position of the list so that I can reset the scroll position when the component is rendered.
For a regular div, this could be done by storing the scroll position on the scroll
event and restoring this in the component's didMount
.
Could we expose a prop to register a callback that will be called at the end of onScrollListener
? I don't think the throttling will be an issue for anyone wanting to use this.
When I give the height in %, the scrollbar disappears
This component has been an enormous help but (I fear) it has a fatal flaw for part of my use case.
I have a list of ~100k alphabetized names in my large touchscreen table application. While the enormous task scrolling through it is actually a key part of the interaction, sometimes the user has other needs and I've given them a set of letter buttons to jump around in the list. The approach of just rewriting the divs array is fairly satisfying until they want to scroll up. I'm currently surviving by using refreshFunction to prepend a new page of data on divs which obviously causes a flash rather than a scroll. Is there a ReactJS-y way to access where the 'top' of the scrolling div is going to start?
Hi,
I would like to add some custom class instead "infinite-scroll-component". How can I do this?
Thanks
It seems to me that without adding the height prop, the scrolling is not working in edge. It even worked in IE. Can anyone confirm it?
I test in mobile chrome browser && our App webview find DOM element has no scrollTo method(problem only find in Andriod),so suggest change "this.el.scrollTo(0, this.props.initialScrollY)" to "this.el.scrollTop = this.props.initialScrollY".
Hi !!
I am having some trouble with scrollableTarget prop.
When I set the prop, the next function never gets triggered.
It seems that I am doing something wrong but I can't see what ...
Here is some part of my code:
<Grid.Column width={11} id='billList' className='bill-content fdx-content bill-list-container'>
<InfiniteScroll
dataLength={this.props.bills.length} //This is important field to render the next data
next={this.loadBills}
scrollableTarget={document.getElementById('billList')}
onScroll={()=> {console.log(document.getElementById('billList'))}}
hasMore={this.state.hasMore}
loader={<Loader status={this.props.isFetching} />}
endMessage={
<p style={{textAlign: 'center'}}>
<b>Yay! You have seen it all</b>
</p>
}>
<BillList
localId={local.id}
token={token}
getBills={getBills}
openSidebar={this.openSidebar}
isSidebarOpen={isSidebarOpen}
bills={this.props.bills}
/>
</InfiniteScroll>
</Grid.Column>
I have a 'Grid' parent div which has billList as ID. This means that the InfiniteScroll is not working with the div scroll.
Besides, if I set a particular height to the InifniteScroll component the onScroll function logs all actions.
I have also looked for some examples with the scrollableTarget option working, but it seems that there is any one in the repo.
I hope you can help me !!
Guido
While targeiiing a outer div than the immendiate parent div for infinite scroll, function call happends for
next property but the items does not load in the UI.
Code Sample
<InfiniteScroll
next={this._loaditems.bind(this) }
hasMore={this.state.hasMoreItems}
scrollableTarget= {this._returnParent() }
scrollThreshold={0.5}
>
<DetailsList
items={this.state.items}
columns={_itemColumns}
layoutMode={DetailsListLayoutMode.fixedColumns}
checkboxVisibility={CheckboxVisibility.hidden}
compact={true}
onRenderRow={this._onRenderitem.bind(this) }
/>
</InfiniteScroll>
//this._returnParent() - returns the parent div object.
The biggest change is that we've extracted React.PropTypes and React.createClass into their own packages. Both are still accessible via the main React object, but using either will log a one-time deprecation warning to the console when in development mode
https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html
I've problem with styling when component is in the middle of context.
<div></div>
<div>There I have component</div>
<div></div>
And the InfiniteScroll makes a div around him and there is no way to inherit hight from outer component. The only solution which I found is to change line:
From var outerDivStyle = this.props.pullDownToRefresh && this.props.height ? { overflow: "auto" } : {};
To: var outerDivStyle = this.props.pullDownToRefresh && this.props.height ? { overflow: "auto", height: "inherit" } : {};
As you can see height:"inherited"
was set in InfiniteScroll props but it inherits from this outerDiv instead of parent.
Also I don't want to specify constant height due to responsiveness of app.
Hi,
I just integrated the component in my application and seems work perfect.
When the screen is large enough to show all the items (for example, 10 items), there is not scroll bar. At that moment, the component don't work.
Please, may I know your suggestion?
Thanks!
Currently implementing this component however, I don't think it makes sense that the endMessage
prop only takes text. Should be able to just pass component without any styling by this component.
When I pass it a div with some content it throws the following error:
Warning: validateDOMNesting(...): <div> cannot appear as a descendant of <p>. See ReviewList > InfiniteScroll > p > ... > InfoBox > div.
Please fix this issue ;) I've never made a pull request and don't have a clue on how to do it ;)
hi, how I can use this on the table?
I need to have exactly the same behavior but for scrolling up also. Is it possible using this component?
Hi! why is window scrolling not working for both desktop and mobile browsers? Thank you!
Hello,
How to keep the scroll in same position when i unshift and render new item in list( this.renderConversations() in this function i have a loop on redux state list) ?
If i update existing item in the list the scroll keep same position.Only when i add new item in list scroll loose position.Thank you!
`
<InfiniteScroll
dataLength={conversations.list.length}
next={() => this.props.fetchMoreUnreadedConversations(conversations.next_page_url)}
hasMore={(conversations.next_page_url)}
height={440}
useWindow={false}
loader={Loading...
}
pullDownToRefresh
pullDownToRefreshContent={
<h3 style={{textAlign: 'center', color: '#FFF'}}>↓ Pull down to refresh
}
releaseToRefreshContent={
<h3 style={{textAlign: 'center', color: '#FFF'}}>↑ Release to refresh
}
refreshFunction={() => {
console.log('refresh')
}}>
{this.renderConversations()}
`
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.