react-skroll
Uses react-spring for butter smooth enhanced scrolling experience
Install
npm install react-skroll --save UMD
<script src="https://unpkg.com/react-sprin/web.umd.js"></script> <script src="https://unpkg.com/react-skroll/dist/react-skroll.js"></script> (Module exposed as ReactSkroll)
Demo
Usage
Functional Children Pattern
Most useful for simple scenarios when you only need the scroll inside the Scroller scope.
import { Scroller } from 'react-skroll' const Demo = () => ( <Scroller scrollRef={ref => this.scroll = ref} autoScroll={true} autoFrame={true} > {scroll => <View> <Button title="1" onPress={() => scroll.scrollToNext()} /> </View> <View> <Button title="2" onPress={() => scroll.scrollToNext()} /> </View> } </Scroller> )Callback Pattern
Most useful for when you only need to read the scroll information
import { Scroller, scrollInitalState } from 'react-skroll' class Demo extends Component { constructor() { super() this.state = { // recommend to use for first render scroll: scrollInitalState } } render() { return ( <View> <Text>{this.State.scroll.position}</Text> <Scroller onScrollChange={scroll => this.setState({ scroll })} > <View> ... </View> <View> ... </View> </Scroller> </View> ) } }Reference Pattern
Most useful for when you need scroll outside the Scroller scope, for example in a navigation bar.
import { Scroller } from 'react-skroll' class Demo extends Component { constructor() { super() this.scroll = null } render() { return ( <View> <Button title="Go to bottom" onPress={() => this.scroll.scrollToBottom()} /> <Scroller scrollRef={ref => this.scroll = ref} > <View> ... </View> <View> ... </View> </Scroller> <Button title="Return to top" onPress={() => this.scroll.scrollToTop()} /> </View> ) } }Props
default
Default scrolling with scrollTo and scroll stats features
autoFrame
Default scrolling with scrolling reframe the view to the current item
autoScroll
Prevents default scrolling and automatically scroll to next item
this.props.scroll
Types:
- position:
number - positionRatio:
float - start:
number - end:
number - viewHeight:
number - scrollHeight:
number - ready:
boolean - onStart:
boolean - onMiddle:
boolean - onEnd:
boolean - children:
[childScroll], - scrolling:
boolean - wheeling:
boolean - touching:
boolean - moving:
boolean - resting:
boolean - scrollTo(
position: number||name: string||node: DOM Element) - scrollToPosition(
position) - scrollToByIndex(
number) - scrollToTop()
- scrollToBottom()
- scrollToElement()
- scrollToActive()
this.props.scroll.children
- name:
string - position:
number - positionRatio:
float - positionRatioRemainer:
float - start:
number - end:
number - viewHeight:
number - onView:
boolean - active:
boolean - onFrame:
boolean
More on props
Check out source code:
TODO
- Document
- Test
