Sliding box over the active item

4.a Save positions of all list items

We will use listItemsPositionsRef for this.

But before we can save, we need to use listItemsRef to get all the keys and calculate positions for all the items.

// The ref to keep track of all items positions
const listItemsPositionsRef: MutableRefObject<ListItems<BoxPosition>> = useRef(
  {},
);

// ...

// Loop over all the items, calculate and save positions
Object.entries(listItemsRef.current).forEach(([key, item]) => {
  const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = item;
  const itemPosition: BoxPosition = {
    '--x': `${Math.round(offsetLeft)}px`,
    '--y': `${Math.round(offsetTop)}px`,
    '--width': `${Math.round(offsetWidth)}px`,
    '--height': `${Math.round(offsetHeight)}px`,
  };

  listItemsPositionsRef.current[key] = itemPosition;
});

4.b Set active box position

As we stated above, we will use the activeItem identifier to grab the size and position of the active element.

const setPosition = useCallback(() => {
  if (!activeItem) return;

  const activeItemPosition = listItemsPositionsRef.current[activeItem];
  if (!activeItemPosition) return;

  setActiveBoxPosition(activeItemPosition);
}, [activeItem]);

Since we're dealing with expensive operations of extracting width, height, offsetLeft and offsetRight, we will use useCallback and be careful about calling the expensive recalcAndSetPosition function.

We don't necessarily want to calculate everything each time the active item changes. We just grab cached values from the itemPositions object.

4.c recalcAndSetPosition is taking care of 4.a and 4.b

const recalcAndSetPosition = useCallback(() => {
  Object.entries(listItemsRef.current).forEach(([key, item]) => {
    const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = item;
    const itemPosition: BoxPosition = {
      '--x': `${Math.round(offsetLeft)}px`,
      '--y': `${Math.round(offsetTop)}px`,
      '--width': `${Math.round(offsetWidth)}px`,
      '--height': `${Math.round(offsetHeight)}px`,
    };

    listItemsPositionsRef.current[key] = itemPosition;
  });

  setPosition();
}, [setPosition, ...recalculate]);

4.d The logic to control all these pieces

Here we create the logic to only set the active box, or to calculate everything and set the active box.

Also we will add a resize event listener so that we recalculate positions when the screen size changes for any reason.

useEffect(setPosition, [activeItem]); // set the active box position
useEffect(recalcAndSetPosition, [...recalculate]); // calc and set the active box position
useEffect(() => {
  //calc and set on screen size change
  window.addEventListener('resize', recalcAndSetPosition);
  return () => window.removeEventListener('resize', recalcAndSetPosition);
}, [recalcAndSetPosition]);

4.e The hook is ready

Our hook returns an object with listItemsRef and activeBoxPosition, and now it looks like this

/* useActiveBoxPosition.ts */

import {
  useEffect,
  useRef,
  useState,
  useCallback,
  type CSSProperties,
  type MutableRefObject,
} from 'react';

type ListItems<T> = { [key: PropertyKey]: T };

interface BoxPosition extends CSSProperties {
  '--x': `${number}px`;
  '--y': `${number}px`;
  '--width': `${number}px`;
  '--height': `${number}px`;
}

const initialBoxPosition: BoxPosition = {
  '--x': '0px',
  '--y': '0px',
  '--width': '0px',
  '--height': '0px',
};

type SlidingBox<Item> = {
  /** Ref containing an array of all the elements in the list. */
  listItemsRef: MutableRefObject<ListItems<Item>>;

  /**
   * Object containing the following CSS (variables) properties of the active item:
   *
   * `--x`(offsetLeft): x-axis position in `px`
   *
   * `--y`(offsetTop):  y-axis position in `px`
   *
   * `--width`(width): width in `px`
   *
   * `--height`(height): height in `px`
   */
  activeBoxPosition: BoxPosition;
};

export default function useActiveBoxPosition<ItemElement extends HTMLElement>({
  activeItem,
  recalculate = [],
}: {
  /** A unique value representing active item in the list. */
  activeItem: string | null | undefined;

  /** Will recalculate (and map) all list elements' sizes and positions when ever any of these values change.
   *
   * Example: new item is added to the list
   */
  recalculate?: unknown[];
}): SlidingBox<ItemElement> {
  const [activeBoxPosition, setActiveBoxPosition] =
    useState(initialBoxPosition);
  const listItemsRef: MutableRefObject<ListItems<ItemElement>> = useRef({});
  const listItemsPositionsRef: MutableRefObject<ListItems<BoxPosition>> =
    useRef({});

  const setPosition = useCallback(() => {
    if (!activeItem) return;

    const activeItemPosition = listItemsPositionsRef.current[activeItem];
    if (!activeItemPosition) return;

    setActiveBoxPosition(activeItemPosition);
  }, [activeItem]);

  const recalcAndSetPosition = useCallback(() => {
    Object.entries(listItemsRef.current).forEach(([key, item]) => {
      const { offsetTop, offsetLeft, offsetWidth, offsetHeight } = item;
      const itemPosition: BoxPosition = {
        '--x': `${Math.round(offsetLeft)}px`,
        '--y': `${Math.round(offsetTop)}px`,
        '--width': `${Math.round(offsetWidth)}px`,
        '--height': `${Math.round(offsetHeight)}px`,
      };

      listItemsPositionsRef.current[key] = itemPosition;
    });

    setPosition();
  }, [setPosition, ...recalculate]);

  useEffect(setPosition, [activeItem]);
  useEffect(recalcAndSetPosition, [...recalculate]);
  useEffect(() => {
    window.addEventListener('resize', recalcAndSetPosition);
    return () => window.removeEventListener('resize', recalcAndSetPosition);
  }, [recalcAndSetPosition]);

  return { listItemsRef, activeBoxPosition };
}