go-to-button/GoToButton.js

go to ref button

import React, { useState, useRef } from 'react';

const GoToButton = (props) => {
  const [buttonDisplay, setButtonDisplay] = useState('none');
  const {
    borderColor,
    backgroundColor,
    textColor,
    width,
    height,
    icon,
    iconColor,
    buttonText,
    isVisible,
    buttonRef,
  } = props;

  const isVisibleFunction = () => {
    if (isVisible) {
      return 'contents';
    } else {
      return 'none';
    }
  };

  const goToButton = document.getElementById('goToButton');
  if (goToButton !== null) {
    goToButton.onmouseover = function() {
      goToButton.style.backgroundColor = borderColor;
      goToButton.style.color = 'white';
      document.getElementById('icon').style.color = 'white';
    };
    goToButton.onmouseout = function() {
      goToButton.style.backgroundColor = backgroundColor;
      goToButton.style.color = textColor;
      document.getElementById('icon').style.color = iconColor;
    };
  }

  const scrollToRef = (ref) => window.scrollTo(0, ref.current.offsetTop);
  const onScrollToRef = () => scrollToRef(buttonRef);

  return (
    <div
      style={{
        display: isVisibleFunction(),
        borderRadius: '10px',
        cursor: 'pointer',
        border: '0px solid red',
      }}
      className="item-btn"
    >
      <button
        id="goToButton"
        onClick={() => {
          onScrollToRef();
        }}
        type="button"
        style={{
          cursor: 'pointer',
          borderRadius: '10px',
          padding: '6px 10px',
          border:
            borderColor === null || borderColor === undefined
              ? '1px solid red'
              : `1px solid ${borderColor}`,
          backgroundColor:
            backgroundColor === null || backgroundColor === undefined
              ? 'white'
              : backgroundColor,
          color:
            textColor === null || textColor === undefined ? 'red' : textColor,
          width: width === null || width === undefined ? '120px' : width,
          height: height === null || height === undefined ? '40px' : height,
        }}
      >
        <i
          id="icon"
          className={
            icon === null || icon === undefined ? 'fa fa-arrow-up' : icon
          }
          style={{
            marginRight: '3px',
            color:
              iconColor === null || iconColor === undefined
                ? 'blue'
                : iconColor,
          }}
        />
        {buttonText === null || buttonText === undefined ? 'Test' : buttonText}
      </button>
    </div>
  );
};

export default GoToButton;