import React, { Component } from 'react';

import { anchorWithOptions } from 'react-scrollto';

const Anchor = anchorWithOptions({
  behaviour: 'smooth'
});

const setHash = (hash) => {
  window.location.hash = hash;
}

class Example extends Component {
  scrollTo = (hash) => {
    setHash(hash);
  }
  render () {
    return (
      <div>
        <button onClick={this.scrollTo('first')}>First</button>
        <button onClick={this.scrollTo('second')}>Second</button>
        <button onClick={this.scrollTo('third')}>Third</button>
        <p>Some text here...</p>;
          <Anchor anchor='first'>First</Anchor>;
        <p>Some text here...</p>;
          <Anchor anchor='second'>Second</Anchor>;
        <p>Some text here...</p>;
          <Anchor anchor='third'>Third</Anchor>;
      </div>
    )
  }
}