How to use use-resize-observer - 2 common examples

style,
  slideStyle,
  enabled,
  trail,
  vertical,
  draggedScale,
  draggedSpring,
  trailingSpring,
  onDragStart,
  onDragEnd
}) {
  const slideStyleFunc = typeof slideStyle === 'function' ? slideStyle : () => slideStyle
  // root holds are slides wrapper node and we use a ResizeObserver
  // to observe its size in order to recompute the slides position
  // when it changes
  const [root, width, height] = useResizeObserver()

  const axis = vertical ? 'y' : 'x'
  const size = vertical ? height : width

  // indexRef is an internal reference to the current slide index
  const indexRef = useRef(index)

  // restPos holds a reference to the adjusted position of the slider
  // when rested
  const restPos = useRef(0)

  // visibleIndexes is a Set holding the index of slides that are
  // currently partially or fully visible (intersecting) in the
  // viewport
  const visibleIndexes = useRef(new Set())
  const firstVisibleIndex = useRef(0)

function FirstLastTimes() {
  const [stop, setStop] = useState('     ');
  const [stopName, setStopName] = useState(null);
  const [data, setData] = useState([]);

  const [tableRef, _, tableHeight] = useResizeObserver();
  const [timeLeft, setTimeLeft] = useState(null);
  const [timeStr, setTimeStr] = useState('');

  useEffect(() => {
    Promise.all([
      fetchCache(firstLastJSONPath, 24 * 60),
      fetchCache(stopsJSONPath, 24 * 60),
    ]).then(([flData, stopsData]) => {
      window.onhashchange = () => {
        const stop = location.hash.slice(1);
        const data = flData[stop];
        if (!data) {
          alert('Bus stop code not found.');
          return;
        }