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
; { const items setItems = ; return <HorizontalScrollView uniqueProp='id' items=items ItemComponent=Item itemComponentProps= example: "example" onLastItemReached= { console; ; } defaultSpace='120px' spaceBetweenItems='40px' moveSpeed=3 /> ;} /** * item -> The item data * parentProps -> the props passed in "itemComponentProps" * index -> the index of the item */ { return <div className='item'> <div className='image' style= backgroundImage: `url()` ></div> <div className='content'> <h4>itemtitle + index + 1</h4> </div> </div> ;} const generateItems = id: "1_" + Date image: "https://picsum.photos/200/300" title: "Title" id: "2_" + Date image: "https://picsum.photos/200/300" title: "Title" id: "3_" + Date image: "https://picsum.photos/200/300" title: "Title" id: "4_" + Date image: "https://picsum.photos/200/300" title: "Title" id: "5_" + Date image: "https://picsum.photos/200/300" title: "Title" id: "6_" + Date 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.