Pull to reflesh material design component.
react-native is supported.
npm install react-pullrefresh
import PullRefresh from 'react-pullrefresh'
// custom renderer
const renderWaitingComponent = (props) => {
return <div style={{backgroundColor:'#00f', color:'#fff'}}>waiting</div>
}
const renderPullingComponent = (props, step) => {
return <div style={{backgroundColor:'#f00', color:'#fff'}}>{step + '/' + props.max}</div>
}
class App extends Component {
constructor(props) {
super(props)
this.state = {
}
this.onRefresh = this.onRefresh.bind(this)
}
onRefresh(next) {
// some async process...
setTimeout(_ => {
next()
},2000)
}
// Without children PullRefresh element observe document.body's scroll
render() {
return (
<div className='App'>
<PullRefresh zIndex={10000} size={40} max={100} onRefresh={this.onRefresh}/>
{range(100).map(i => {
return (
<div key={i} className='row'>{i}</div>
)
})}
</div>
)
}
// With scrollable element children, observe children's scrolling.
render() {
return (
<PullRefresh
zIndex={10000}
size={40}
max={100}
waitingComponent={false}
pullingComponent={renderPullingComponent}
onRefresh={this.onRefresh}
supportDesktop={true}
>
<!-- scrollable child element -->
<div className='App' style={{ overflow: 'auto', height: '100%' }}>
{range(100).map(i => {
return (
<div key={i} className='row'>{i}</div>
)
})}
</div>
</PullRefresh>
)
}
}
export default App
default: 0
Y-Offset for layout.
default: #000
default: false
Disable component
default: undefined
specify css z-index.
default: 40
indicator size.
default: 100
max pull down distance.
pull event will be fired on touchend,mouseup.
first argument is callback function, so must be called.
function onRefresh(callback) {
//...some async function
callback()
}
Specify component you want to render on waiting state. If false is specified, nothing rendered.
Specify component you want to render on waiting state. If false is specified, nothing rendered.
default: false
Enable component on desktop if specified.
https://yusukeshibata.github.io/react-pullrefresh/
MIT