/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 vote154 views1 answer
Onclick start and stop the count react
Javascript React
0 vote153 views2 answers
Reactjs firebase timestamp to date
Javascript React
0 vote94 views1 answer
Undefined is not a function (near '...(0, _reactNative.createStackNavigator)...')
Javascript React
1 vote140 views2 answers
How to navigate with navintems for react-bootstrap without refreshing the whole page
Javascript React
0 vote182 views1 answer
Render blaze in react
Javascript React
1 vote144 views1 answer
Column width table react
Javascript React
0 vote162 views1 answer
Can i open native video playback for both (Androidt / IOS) With React Native?
Javascript React
47 votes146 views3 answers
How to comment in the react javascript
Javascript React
0 vote127 views1 answer
How to detect if app is loosing focuse in react native
Javascript React
4 votes149 views4 answers
Width 100% react native
Javascript React