Hooks

These React hooks let you find layers in the artwork on screen, and position your own interface against them. Get them with getHooks.

Note

These are standard React hooks, so the Rules of Hooks apply: call them unconditionally, and in the same order every render.

useLayers

Returns every layer or group in a slot’s frame that matches a CSS-style selector.

useLayers(slot: FrameKey, selector: string): Array<Layer>

The layers don’t include their bounds. Returns an empty array if nothing matches, or if the slot has no frame.

Example

const { getHooks } = getSelectors();
const { useLayers } = getHooks();

function Portraits() {
  const portraits = useLayers("scene", ".portrait");
  return portraits.map((layer) => <Portrait key={layer.id} layer={layer} />);
}

useLayerBounds

Calls callback with the on-screen bounds of each visible layer that matches selector in a slot’s frame.

useLayerBounds(
  slot: FrameKey,
  selector: null | string,
  callback: (bounds: Bounds, layer: Layer) => void,
): void

Bounds are in CSS pixels. The callback runs once when the component mounts, so your element can position itself before it first appears, then again on every frame where the camera moves. It doesn’t run if the slot has no frame, or nothing matches.

Example

const { getHooks } = getSelectors();
const { useLayerBounds } = getHooks();

function SpeechBubble() {
  const ref = useRef(null);
  useLayerBounds("scene", ".mouth", (bounds) => {
    const el = ref.current;
    if (el == null) return;
    el.style.left = `${bounds.left}px`;
    el.style.top = `${bounds.top}px`;
  });
  return <div ref={ref} className="speech-bubble" />;
}