A virtual slider for large dataset.
Examples available here: http://vunguyentuan.github.io/react-virtual-slider
- 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
Using npm:
$ npm install react-virtual-slider --save
Or yarn:
$ yarn add react-virtual-slider
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
In root folder:
$ yarn install
$ yarn start
React Virtual Slider has no dependencies. It has the only one peerDependencies: react
If believe you've found an issue, please report it along with any relevant details to reproduce it.
Please do not use the issue tracker for personal support requests. Instead, use Gitter or StackOverflow.
Yes please! Feature requests / pull requests are welcome.