/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

-1 vote329 views1 answer
Convert create-react-app to typscript
Javascript React
0 vote335 views1 answer
React Native Expo Scrollview Scroll to bottom
Javascript React
0 vote339 views1 answer
React show new app
Javascript React
0 vote289 views1 answer
React open on different url instead of localhost
Javascript React
-2 votes344 views1 answer
How to get country code in react native
Javascript React
0 vote293 views2 answers
Which one is better arrow functions or using bind in react?
Javascript React
0 vote307 views1 answer
Export 'default' (imported as 'Redirect') was not found in 'react-router-dom'
Javascript React
25 votes300 views3 answers
Setting a background Image With React Inline Styles
Javascript React
1 vote330 views2 answers
React js alert popup example
Javascript React
0 vote303 views1 answer
Load all icon from a folder in react
Javascript React