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

Codepen 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

du5rte/react-skroll