/Javascript/React/Infinite scroll for chat react js

Infinite scroll for chat react js

<div
  id="scrollableDiv"
  style={{
    height: 300,
    overflow: 'auto',
    display: 'flex',
    flexDirection: 'column-reverse',
  }}
>
  {/*Put the scroll bar always on the bottom*/}
  <InfiniteScroll
    dataLength={this.state.items.length}
    next={this.fetchMoreData}
    style={{ display: 'flex', flexDirection: 'column-reverse' }} //To put endMessage and loader to the top.
    inverse={true} //
    hasMore={true}
    loader={<h4>Loading...</h4>}
    scrollableTarget="scrollableDiv"
  >
    {this.state.items.map((_, index) => (
      <div style={style} key={index}>
        div - #{index}
      </div>
    ))}
  </InfiniteScroll>
</div>

Source: npmjs.com

Similar codes

0 vote227 views1 answer
Hot loading react native shortcut key
Javascript React
3 votes229 views1 answer
React proxy error: could not proxy request from localhost:3000 to http localhost:5000 econnreset
Javascript React
0 vote194 views1 answer
Options not working properly in reactjs
Javascript React
0 vote277 views1 answer
Reactjs ES6 class event listeners in jsx
Javascript React
2 votes262 views3 answers
There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally.
Javascript React
2 votes188 views2 answers
React native scrollview detect end
Javascript React
0 vote185 views1 answer
Import React from 'react'; import {Router, Scene} from 'react-native-router-flux';
Javascript React
0 vote206 views1 answer
How to remove an object from array in react native
Javascript React
-1 vote267 views5 answers
Context Api in react
Javascript React
0 vote215 views1 answer
React electron desktop app
Javascript React