useUniverse

useUniverse names the component this render draws into — for the component a <ui> hosts, the interface’s own outermost box; for a nested one, the container it was placed in.

useUniverse(): Ref

Reference

useUniverse()

src/layout.ts2

const DropList = (): Component => {
  const universe = useUniverse();
  const list = useRef();
  const content: Int = DROPS.length * ROW_H;

  return (
    <layer w="fill" h="fill">
      <SunkenBox>
        <layer ref={list} x={2} y={2} w={{ fill: 22 }} h={{ fill: 4 }}
               scrollHeight={content > universe.height ? content : 0}>

Parameters

None.

Returns

A Ref to the box. Its geometry — width, height, x, y — reads like any ref’s.

Caveats

• It is read once. To follow a resize, use useOnResize(universe), or onResize on the element.
• Inside a component only (TS2E215).
• Reach for it only when a keyword cannot say what you mean.

refused/use-universe.ts2

const universe = useUniverse();                                      // no component here

Usage

Deciding whether to scroll

src/layout.ts2

               scrollHeight={content > universe.height ? content : 0}>

Sizing from the box, and following it

src/reference-lifecycle.ts2

  const universe = useUniverse();
  useOnResize(universe);

  const track: Int = universe.width - 8;

Troubleshooting

The size is wrong after the window is resized

The read was taken once, when the component built. Add useOnResize(universe) so the component builds again when the window’s resize changes its box.