{"size": 702, "ext": "js", "max_stars_repo_path": "src/hooks/useScrollCenter.js", "max_stars_repo_name": "MichaelFrieze/michaelfrieze.blog", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/hooks/useScrollCenter.js", "max_issues_repo_name": "MichaelFrieze/michaelfrieze.blog", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/hooks/useScrollCenter.js", "max_forks_repo_name": "MichaelFrieze/michaelfrieze.blog", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 27.0, "max_line_length": 76, "alphanum_fraction": 0.6809116809}
import { useLayoutEffect } from 'react';

const useScrollCenter = ({ ref, targetId }) => {
  useLayoutEffect(() => {
    if (!ref) return;
    const categoryWrapEl = ref.current;

    const isScrollActivated =
      categoryWrapEl.scrollWidth >= categoryWrapEl.offsetWidth;
    if (!isScrollActivated) return;

    const activeCategoryEl = categoryWrapEl.querySelector(`#${targetId}`);
    if (!activeCategoryEl) return;

    const offsetX = activeCategoryEl.offsetLeft - categoryWrapEl.offsetLeft;
    categoryWrapEl.scrollTo(
      offsetX -
        categoryWrapEl.offsetWidth / 2 +
        activeCategoryEl.offsetWidth / 2,
      0,
    );
  }, [ref, targetId]);
};

export default useScrollCenter;
