/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 vote182 views1 answer
Z index react native
Javascript React
2 votes209 views3 answers
React cdn
Javascript React
1 vote287 views1 answer
React site warning: The href attribute requires a valid address. Provide a valid, navigable address as the href value jsx-a11y/anchor-is-valid
Javascript React
0 vote291 views2 answers
Hosting react on gh pages
Javascript React
0 vote200 views1 answer
React useState vs variable
Javascript React
0 vote214 views1 answer
React native intro slider
Javascript React
7 votes235 views1 answer
React Hook "React.useState" is called in function "placeItem" which is neither a React function component or a custom React Hook function react-hooks/rules-of-hooks
Javascript React
1 vote232 views1 answer
React vscode stop auto close tag
Javascript React
0 vote442 views1 answer
Window.location.search get parameters react
Javascript React
0 vote249 views1 answer
Change module name react native android studio
Javascript React