import { Slider } from "rc-horizontal-slider";
 
function App() {
  const [items, setItems] = useState(generateItems());
  return (
    <Slider
      uniqueProp='id'
      items={items}
      ItemComponent={Item}
      itemComponentProps={{ example: "example" }}
      onLastItemReached={page => {
        console.log(page);
        setItems([...items, ...generateItems()]);
      }}
      defaultSpace='120px'
      spaceBetweenitems='40px'
      moveSpeed={3}
    />
  );
}
 
/**
 * item -> The item data
 * parentProps -> the props passed in "itemComponentProps"
 * index -> the index of the item
 */
function Item({ item, parentProps, index }) {
  return (
    <div className='item'>
      <div className='image' style={{ backgroundImage: `url(${item.image})` }}></div>
      <div className='content'>
        <h4>{item.title + (index + 1)}</h4>
      </div>
    </div>
  );
}
 
const generateItems = () => [
  {
    id: "1_" + Date.now(),
    image: "https://picsum.photos/200/300",
    title: "Title"
  },
  {
    id: "2_" + Date.now(),
    image: "https://picsum.photos/200/300",
    title: "Title"
  },
  {
    id: "3_" + Date.now(),
    image: "https://picsum.photos/200/300",
    title: "Title"
  },
  {
    id: "4_" + Date.now(),
    image: "https://picsum.photos/200/300",
    title: "Title"
  },
  {
    id: "5_" + Date.now(),
    image: "https://picsum.photos/200/300",
    title: "Title"
  },
  {
    id: "6_" + Date.now(),
    image: "https://picsum.photos/200/300",
    title: "Title"
  }
];