react-skroll

Uses react-motion for butter smooth enhanced scrolling experience

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>

autoFrame

Default scrolling with scrolling reframe the view to the current item

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

autoScroll

Prevents default scrolling and automatically scroll to next item

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

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

Thomas0c / react-skroll