useTapSize

function useTapSize(): TapSize;

Returns how much room the mount has: slot, panel or page.

Returns

TapSize

Remarks

Expanding a widget mounts a second copy of the component in the panel rather than resizing the one in the slot, so the change this hook reports is the panel’s own Widen and Narrow toggle moving between panel and page. Size against the mount with a container query where CSS can do the work; this hook is for the cases that need different markup. Throws TAP_OUTSIDE_HOST outside a mount.

Example

import { TapTable, useTapSize } from '@tappify/extension-sdk';

function Keywords({ rows }: { rows: { term: string }[] }) {
  const size = useTapSize();
  const shown = size === 'slot' ? rows.slice(0, 3) : rows;
  return (
    <TapTable
      columns={[{ key: 'term', label: 'Term' }]}
      rows={shown}
      rowKey={row => row.term}
    />
  );
}

Start

Build

Test

Publish

Reference

Returns

Remarks

Example

​Returns

​Remarks

​Example

Returns

Remarks

Example