State Inspector

Usage

import { StateInspector } from '@wdzyi/ui';

<div style={{ position: 'relative', aspectRatio: '4 / 3' }}>
  <StateInspector on={hovered} />
</div>

Part of @wdzyi/ui. See setup to install it, or copy the code above.

Props

onboolean = false

Runs through the states, a little over a second each.

labelstring = 'Send a message'

What the button says. The width tag follows it.

Notes

• The width is measured from the real button once the fonts have loaded, so it can’t go out of date.
• It fills its nearest positioned parent. In a box under 320px wide, it comes down to the button, its measurements and the current state.
• With reduced motion, it stays on Default.