rc-horizontal-scroll

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.