import { Component } from 'react';

export const scrollTo = (href) => {
    let anchor = href.replace("/#", "");
    let node = document.getElementById(href);
    if(node){
        let scrollToY =  node.getBoundingClientRect().top;
        window.scrollTo({ top: scrollToY + window.pageYOffset, behavior: 'smooth' });
    }
}

export default class SmoothScrollAnchor extends Component {
    handleClick = () => {
        event.preventDefault();
        history.pushState(null, null, this.props.href);
        scrollTo(this.props.href);
    }

    render(){
        return(
            <a {...this.props} onClick={this.handleClick}>{this.props.children}</a>
        )
    }
}