React Virtual Slider
A virtual slider for large dataset.
http://vunguyentuan.github.io/react-virtual-slider
Examples available here:Features
- Smooth animations - 60FPS dream 🌈
- Independent style - just style it as you like
- No scrollbar - yeah, you control the slider by calling goNext, goPrev, scrollTo methods
- Render large dataset - no matter how much your data is, it's just works
Installation
Using npm:
$ npm install react-virtual-slider --save
Or yarn:
$ yarn add react-virtual-slider
Usage:
Basic Example
import React, { Component } from 'react'
import { render } from 'react-dom'
import VirtualSlider from 'react-virtual-slider'
const styles = {
item: {
width: 151,
height: 188,
display: 'inline-block'
},
container: {
overflow: 'hidden',
}
}
class Demo extends Component {
renderItem = (index, key) => {
return (
<div key={key} style={styles.item}>
{index}
</div>
)
}
handlePrev = () => {
this.slider.goBack()
}
handleNext = () => {
this.slider.goNext()
}
render() {
return (
<div>
<VirtualSlider
ref={slider => this.slider = slider}
itemRenderer={this.renderItem}
itemSize={151}
length={50000}
containerStyle={styles.container}
/>
<button onClick={this.handlePrev}>Prev</button>
<button onClick={this.handleNext}>Next</button>
</div>
)
}
}
render(<Demo/>, document.querySelector('#demo'))
That's it! Simple :D
FAQ
Running Examples
In root folder:
$ yarn install
$ yarn start
Dependencies
React Virtual Slider has no dependencies. It has the only one peerDependencies: react
Reporting Issues
If believe you've found an issue, please report it along with any relevant details to reproduce it.
Asking for help
Please do not use the issue tracker for personal support requests. Instead, use Gitter or StackOverflow.
Contributions
Yes please! Feature requests / pull requests are welcome.