DEPRECATED

components have been moved to https://github.com/pshrmn/rrc

scroll-component

When using React Router v4, you might have noticed that when you navigate, the page does not automatically scroll to the hash portion of the URI.

With the <ScrollIntoView> component, you can pass it an id value which will identify an element in the page and scroll to it. This uses element.scrollIntoView to scroll. It supports the alignToTop argument because it is widely supported, but not the scrollIntOViewOptions because it is currently only supported by Firefox.

Example

React Router provides its matched components with a location prop. This is an object with the current location divided into its pathname, search, and most importantly hash properties. The hash value is the element identifier that you should pass to the <ScrollIntoView> component.

Note: This will not work with a hash history because the hash portion of the URL is being used for routing.

import React from 'react'
import ScrollIntoView from 'scroll-component'

const FAQ = (props) => (
  <div>
    <ScrollIntoView id={props.location.hash} />
    <div id='who'>...</div>
    <div id='what'>...</div>
    <div id='where'>...</div>
    <div id='when'>...</div>
    <div id='why'>...</div>
    <div id='how'>...</div>
  </div>
)

<ScrollIntoView>

Usage

const Foo = (props) => (
  <ScrollIntoView id={props.location.hash}>
    <div>
      <h1>My View</h1>
      <div id='scroll'>Scroll to me!</div>
    </div>
  </ScrollIntoView>
)
 
<Match pattern='/foo' component={Foo} />

id

The id prop is the id of th element in the page that should be scrolled to. The id should begin with a #, for example #scroll-to-me.

<ScrollIntoView id={id} />

alignToTop

By default, element.scrollIntoView will align the top of the identified element to the top of the page (or as near as it possibly can). If you would prefer to align the bottom of the identified element with the bottom of the page, set alignToTop to false.

<ScrollIntoView alignToTop={false} />

The component can be used by itself or as a container.

const PageOne = (props) => (
  <div>
    <ScrollIntoView id={props.location.hash} />
    <h1>Page One</h1>
  </div>
)

// or

const PageTwo = (props) => (
  <ScrollIntoView id={props.location.hash}>
    <h1>Page Two</h1>
  </ScrollIntoView>
)

withScroll

The withScroll function provides a higher order component to wrap your view component. It can take two options, which help it control the props passed to the <ScrollIntoView> component.

Usage

const Foo = (props) => (
  <div>
    <h1>My View</h1>
    <div id='scroll'>Scroll to me!</div>
  </div>
)

<Match pattern='/foo' component={withScroll(Foo)} />

Options

propId

If provided, propId is a function that will return the id of the element which should be scrolled to. The function will be passed the props object that is used to render the component. The default propId function returns props.location.hash, which is the location of the hash that is passed by React Router to matched components.

<Match pattern='/foo' component={withScroll(Foo, { propId: () => '#scroll' })} />

alignToTop

You can specify the scroll alignment with the alignToTop option. true is the default value while false will align the bottom of the scrolled to element with the bottom of the page.

<Match pattern='/foo' component={withScroll(Foo, { alignToTop: false })} />