/react-skroll

Reactive Scrolling

Primary LanguageJavaScriptMIT LicenseMIT

react-skroll

Uses react-spring for butter smooth enhanced scrolling experience

Build Status David PRs Welcome PRs Welcome

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

preview

autoFrame

Default scrolling with scrolling reframe the view to the current item

preview

autoScroll

Prevents default scrolling and automatically scroll to next item

preview

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