Rc-horizontal-slider NPM

rc-horizontal-slider

Simple lightweight and customizable horizontal slider.

install

Usage

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"
  }
];

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)