import * as React from 'react' ; import styled from 'styled-components' ; import useInfiniteScroll from '../../src' ; import { useLoadItems } from '../utils' ; import { List , ListItem , Loading } from '../components/List' ; const ListContainer = styled . div `
  background-color: #fafafa;
` ; const Footer = styled . div `
  height: 600px;
  background-color: #dcdcdc;
` ; function SimpleInfiniteList ( ) { const { loading , items , hasNextPage , error , loadMore } = useLoadItems ( ) ; const [ infiniteRef ] = useInfiniteScroll ( { loading , hasNextPage , onLoadMore : loadMore , disabled : ! ! error , rootMargin : '0px 0px 400px 0px' , } ) ; return ( < > < ListContainer > < List > { items . map ( ( item ) => ( < ListItem key = { item . key } > { item . value } < /ListItem>))} { } { hasNextPage && ( < ListItem ref = { infiniteRef } > < Loading /> < /ListItem>)} < /List> < /ListContainer> < Footer > Footer < /Footer> < />); } export default SimpleInfiniteList ;