/react-skroll

Reactive Scrolling

Primary LanguageJavaScriptMIT LicenseMIT

react-skroll

Uses react-motion 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-skroll/dist/react-skroll.js"></scrip>

(Module exposed as ReactSkroll)

ReactSkroll

Codepen Demo

Live Demo

Example Usage

import { Scroll, ScrollProvider, ScrollLink } from 'react-skroll'

class Demo extends Component {
  render() {
    return (
      <div style={{height: '100%'}}>
        <nav>
        {
          this.props.scroll.children.map((child, index) =>
            <ScrollLink key={index} index={index} to={child.name}>
              {child.name}
            </ScrollLink>
          )
        }
        </nav>

        <Scroll>
          {/* name: optional, used to generate the navigator */}
          <section name="Home">
            ...
            <ScrollLink to="About" />
          </section>
          <section name="About">
            ...
            <ScrollLink to="Contact" />
          </section>
          <section name="Contact">
            ...
            <ScrollLink to="Home" />
          </section>
        </Scroll>
      </div>
    )
  }
}

ReactDOM.render(
  <ScrollProvider>
    <Demo />
  </ScrollProvider>,
  document.getElementById('app')
)

Compatible with Redux

@connect(mapStateToProps)
@scrollConnect // add after react-redux connect
export class Demo extends Component {
  render() {
    ...
  }
}

ReactDOM.render(
    <Provider store={store}>
      <ScrollProvider>
        <Demo />
      </ScrollProvider>
    </Provider>,
  document.getElementById('app')
)

ScrollProvider

default

Default scrolling with scrollTo and scroll stats features

<ScrollProvider>
  <Demo />
</ScrollProvider>

preview

autoFrame

Default scrolling with scrolling reframe the view to the current item

<ScrollProvider autoFrame={true}>
  <Demo />
</ScrollProvider>

preview

autoScroll

Prevents default scrolling and automatically scroll to next item

<ScrollProvider autoScroll={true}>
  <Demo />
</ScrollProvider>

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)
  • scrollToName(name)
  • 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