scroll.js

import React, { useState, useEffect, useRef } from 'react';
import fetch from 'fetch-hoc';
import classNames from 'classnames';
import { useHotkeys } from 'react-hotkeys-hook';

const scrollOpts = { behavior: "smooth", block: "nearest" };

const Row = props => {
  const {data, selected} = props;
  const [visible, setVisible] = useState(true);
  const ref = useRef(null);

  let className = classNames({
    "list-group-item": true,
    "active": selected,
  });

  let changeVisibility = entries =>
    entries.forEach(({isIntersecting}) => setVisible(isIntersecting));

  useEffect(() => { if (!visible && selected && ref) { ref.current.scrollIntoView(scrollOpts) } }, [selected]);

  useEffect(() => {
    (new IntersectionObserver(changeVisibility, { root: null, threshold: 1 })).observe(ref.current);
  }, [ref])

  return (
    <li ref={ref} className={className}>{data}</li>
  )
}

const App = props => {
  let {error, loading, data} = props;
  const [selected, setSelected] = useState(0);

  useHotkeys('j', () => (selected >= data.length) || setSelected(selected+1), [selected, data]);
  useHotkeys('h', () => (selected === 0) || setSelected(selected-1), [selected, data]);

  if (error || loading) { return <div />; }

  return (
    <div className="container pt-3">
      <ul className="list-group">
        {data.map((r, i) => <Row data={r} key={i} selected={i === selected} />)}
      </ul>
    </div>
  );
}

export default fetch('https://baconipsum.com/api/?type=meat-and-filler?paras=50')(App);