{"size": 1350, "ext": "js", "max_stars_repo_path": "packages/gatsby-theme-newrelic/src/components/SearchModal/ScrollContainer.js", "max_stars_repo_name": "sjyothi54/gatsby-theme-newrelic", "max_stars_repo_stars_event_min_datetime": "2020-07-22T20:04:06.000Z", "max_stars_repo_stars_event_max_datetime": "2022-01-04T17:56:24.000Z", "max_issues_repo_path": "packages/gatsby-theme-newrelic/src/components/SearchModal/ScrollContainer.js", "max_issues_repo_name": "sjyothi54/gatsby-theme-newrelic", "max_issues_repo_issues_event_min_datetime": "2020-07-18T00:44:35.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-25T18:37:17.000Z", "max_forks_repo_path": "packages/gatsby-theme-newrelic/src/components/SearchModal/ScrollContainer.js", "max_forks_repo_name": "sjyothi54/gatsby-theme-newrelic", "max_forks_repo_forks_event_min_datetime": "2020-07-23T07:04:07.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-23T06:46:17.000Z"}
{"max_stars_count": 17, "max_issues_count": 255, "max_forks_count": 12, "avg_line_length": 26.4705882353, "max_line_length": 75, "alphanum_fraction": 0.6451851852}
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import { css } from '@emotion/react';
import { useIntersection } from 'react-use';
import usePrevious from '../../hooks/usePrevious';

const ScrollContainer = ({ children, onIntersection, monitor = true }) => {
  const intersectionRef = useRef();
  const root = useRef();
  const intersection = useIntersection(intersectionRef, {
    root: root.current,
    rootMargin: '0px 0px 200px 0px',
    threshold: 1,
  });

  const isIntersecting = intersection?.isIntersecting;
  const wasIntersecting = usePrevious(isIntersecting);

  useEffect(() => {
    if (isIntersecting && !wasIntersecting) {
      onIntersection();
    }
  }, [wasIntersecting, isIntersecting, onIntersection]);

  return (
    <div
      ref={root}
      css={css`
        border-right: 1px solid var(--border-color);
        height: calc(100vh - 6 * var(--site-content-padding));
        overflow: auto;
        @media screen and (max-width: 760px) {
          border-right: none;
          height: unset;
        }
      `}
    >
      {children}
      {monitor && <div ref={intersectionRef} />}
    </div>
  );
};

ScrollContainer.propTypes = {
  children: PropTypes.node.isRequired,
  onIntersection: PropTypes.func.isRequired,
  monitor: PropTypes.bool,
};

export default ScrollContainer;
