Nifty Anchor Scrolling React HOC

withAnchor.js

import jump from 'jump.js'
import React, { Component } from 'react'

function withAnchorScroll(WrappedComponent) {
  return class ScrollToAnchors extends Component {
    componentDidMount() {
      const { location: { hash } } = this.props

      if (hash) {
        /*
          setTimeout is used to prevent BrowserRouter(react-router-dom)
          from resetting the scroll back to the position on page refresh.
        */
        setTimeout(() => {
          this.scrollToAnchor(hash)
        }, 0)
      }
    }

    componentDidUpdate({ location: prevLocation }) {
      const { location } = this.props

      if (location !== prevLocation) {
        this.scrollToAnchor(location.hash)
      }
    }

    scrollToAnchor = (anchor) => {
      if (!anchor) {
        return
      }

      const element = document.querySelector(anchor)

      if (element) {
        jump(element, { duration: 500 })
      }
    }

    render() {
      return <WrappedComponent {...this.props} />
    }
  }
}

export default withAnchorScroll