rc-horizontal-scroll/README.md

React Horizontal Scroll

# rc-horizontal-scroll

Simple lightweight and customizable horizontal scroll.

## Install

[![rc-horizontal-scroll](https://nodei.co/npm/rc-horizontal-scroll.png)](https://npmjs.org/package/rc-horizontal-scroll)

<!-- ## Example

http://react-component.github.io/table/examples/ -->

## Features
- Draggable on desktop
- Lazyloading
- Control space between items and desktop manage drag speed

## Usage

```js
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.