useOnResize

useOnResize makes this component render again when resizing the game window changes the named component’s size.

useOnResize(ref: Ref): void

Reference

useOnResize(ref)

src/reference-lifecycle.ts2

export const FitGauge = (): Component => {
  const universe = useUniverse();
  useOnResize(universe);

  const track: Int = universe.width - 8;

Parameters

• ref: The component whose size to follow — usually useUniverse(), the box this component draws into.

Returns

Nothing.

Caveats

• Only the game window’s resize fires it, and the server moving the interface to another slot. A size a ref write or a redraw changes does not.
• A cell written from onResize and never read is refused (TS2E228); use this hook. Bind onResize yourself only when the handler does something other than ask for a re-render — moving a component directly, say.

Usage

Fitting a component to the box it was given

src/reference-lifecycle.ts2

  return (
    <layer w="fill" h={18}>
      <text x={0} y="center" w={{ fill: 60 }} h={14} text={`${universe.width} px wide`}
            font={Fonts.SMALL} valign="middle" shadow color={Colors.DIM} />
      <rect x={4} y={{ bottom: 0 }} w={track} h={4} color={0x1a1712} fill />
      <rect x={4} y={{ bottom: 0 }} w={track * 2 / 3} h={4} color={Colors.AMBER} fill />
    </layer>
  );

Prefer a keyword (w="fill", w="90%") where one fits.

Troubleshooting

The panel does not follow the window

Check the hook is in the component that reads the size, and that the read is in the render rather than in a handler.