HeaderNavigation.js

import React from 'react'

import ExternalLinkIcon from './link.svg'
import HeaderNavigationItem from '../HeaderNavigationItem/HeaderNavigationItem'
import { TutorialContext } from '../Tutorial/TutorialProvider'

import style from './HeaderNavigation.scss'

function HeaderNavigation() {
  return (
    <nav>
      <TutorialContext.Consumer>
        {({ createStep }) => (
          <HeaderNavigationItem
            innerRef={createStep({ order: 0 })}>
            Downloads
          </HeaderNavigationItem>
        )}
      </TutorialContext.Consumer>

      <TutorialContext.Consumer>
        {({ createStep }) => (
          <HeaderNavigationItem
            innerRef={createStep({ order: 1 })}>
            Help
          </HeaderNavigationItem>
        )}
      </TutorialContext.Consumer>
    </nav>
  )
}

export default HeaderNavigation

Tutorial.js

import React, { Component, Fragment } from 'react'
import { Popper } from 'react-popper'

import { TutorialContext } from './TutorialProvider'

class Tutorial extends Component {

  state = {
    stepIndex: 0,
  }

  next = () => {
    this.setState(state => ({
      stepIndex: state.stepIndex + 1,
    }))
  }

  render() {
    const { stepIndex } = this.state

    return (
      <TutorialContext.Consumer>
        {({ steps }) => {
          const step = steps.get(stepIndex)

          if (!step || !step.ref) return null

          return (
              <Popper
                referenceElement={step.ref}
                placement={step.placement}>
                {() => (
                  ...
                )}
              </Popper>
            </Fragment>
          )
        }}
      </TutorialContext.Consumer>
    )
  }
}

export { Tutorial }

TutorialProvider.js

import React from 'react'

export const TutorialContext = React.createContext({})

export class TutorialProvider extends React.Component {
  constructor(props) {
    super(props)
    this.steps = new Map()
    this.state = {
      steps: new Map(),
      createStep: this.createStep,
    }
  }

  componentDidMount() {
    this.setState({
      steps: this.steps,
    })
  }

  createStep = ({ order, placement = 'bottom' }) => {
    const existingStep = this.steps.get(order)

    if (existingStep) return existingStep.getRef

    const step = {
      placement,
      ref: null,
      getRef: ref => {
        step.ref = ref
      },
    }

    this.steps.set(order, step)

    return step.getRef
  }

  render() {
    return (
      <TutorialContext.Provider value={this.state}>
        {this.props.children}
      </TutorialContext.Provider>
    )
  }
}