rc-horizontal-scroll

Simple lightweight and customizable horizontal scroll.

Install

Features

• Draggable on desktop
• Lazyloading
• Control space between items and desktop manage drag speed

Usage

import { HorizontalScrollView } from "rc-horizontal-scroll";

function App() {
  const [items, setItems] = useState(generateItems());
  return (
    <HorizontalScrollView
      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"
  }
];

API

Properties

| Name | Type | Default | Required | Description | | ------------------ | -------- | -------- | -------- | --------------------------------------------------------------------------- | | items | array | No | true | Array if items (objects) | | uniqueProp | string | No | false | A unique prop used for key. If not found index will be used instead | | ItemComponent | function | No | true | The component that renders each slide | | itemComponentProps | object | {} | true | The props that are going to be passed to the ItemComponent as parentProps | | onLastItemReached | function | () => {} | false | Used for lazy loading | | defaultSpace | string | 20px | false | The left and right space | | spaceBetweenItems | string | 20px | false | The space between each item | | moveSpeed | number | 1.5 | false | Move speed (only for desktop) |

ItemComponent Props

| Name | Type | Description | | ----------- | ------ | --------------------------------------- | | index | number | The index of the item | | parentProps | object | The data passed in itemComponentProps | | item | object | The item data |

License

rc-horizontal-slider is released under the MIT license.