react-virtual-slider
v1.0.3
Published
react-virtual-slider React component
Downloads
26
Maintainers
Readme
React Virtual Slider
A virtual slider for large dataset.
Examples available here: http://vunguyentuan.github.io/react-virtual-slider
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.