React Horizontal Scroll
npm install rc-horizontal-scrollSimple lightweight and customizable horizontal scroll.
``js
import { HorizontalScrollView } from "rc-horizontal-scroll";
function App() {
const [items, setItems] = useState(generateItems());
return (
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 (
}}>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"
}
];
`
| 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 |parentProps
| 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 |
| 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) |
| Name | Type | Description |
| ----------- | ------ | --------------------------------------- |
| index | number | The index of the item |
| parentProps | object | The data passed in itemComponentProps` |
| item | object | The item data |
rc-horizontal-slider is released under the MIT license.