Note: This component is in a beta. I haven't explored all the animation options, and Firefox is giving slightly different deltas for some of the mice that I have tested. See that issue here.

Usage

npm i react-scroll-horizontal

  <HorizontalScroll
      pageLock      = { bool }
      reverseScroll = { bool }
      style         = { object }
      config        = {{ stiffness: int, damping: int }}
      >
      { children }
  </HorizontalScroll>

Props

pageLock - Adds a lock__ class to the HTML body
reverseScroll - Reverses the scroll direction
style - Passes a spring config object to React Motion
config - Passes a spring config object to React Motion

Gotchas

Uses Flexbox
Child item(s) must be px/em/vw - no percentages (yet)

Arbitrary Parent/Child Widths Example

import React, { Component } from 'react'
import HorizontalScroll from 'react-horizontal-scroll'

class ScrollingHorizontally extends Component {
  render() {
    const child   = { width: `30em`, height: `100%`}
    const parent  = { width: `60em`, height: `100%`}
    return (
      <div style={parent}>
        <HorizontalScroll>
            <div style={child} />
            <div style={child} />
            <div style={child} />
        </HorizontalScroll>
      </div>
    )
  }
}

Full Width Example

import React, { Component } from 'react'
import HorizontalScroll from 'react-horizontal-scroll'

class ScrollingHorizontally extends Component {
  render() {
    const child = { width: `300em`, height: `100%`}
    return (
      <body>
        <HorizontalScroll>
          <div style={child} />
        </HorizontalScroll>
      </body>

    )
  }
}

Contributing

Yes, please!

MIT License

Keywords

FAQs

What is react-scroll-horizontal?

Is react-scroll-horizontal popular?

Is react-scroll-horizontal well maintained?

Package last updated on 15 Jul 2016

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install