Card Resize

Usage

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

<CardResize label='profile' compact={<ProfileRow />}>
  <ProfileDetails />
</CardResize>

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

Props

compactReactNode

What it shows while it’s small. Keep the top right corner clear for its button.

childrenReactNode

What it shows once it’s open. The card is whatever size its contents are, so give them the size you want.

open, defaultOpenboolean = false

Open or not. Pass open to hold the state yourself, or defaultOpen to let the card hold it.

onOpenChange(open: boolean) => void

Called when its button, a press on the compact card or Escape asks for a change.

labelstring = 'card'

Names its button, as in Open card and Close card.

Notes

• It’s a measured FLIP. The card takes its new size at once, is drawn back at the old one, then eases across on a spring, so width and height change together without animating layout.
• Only the surface is scaled. The edges move separately, so the hairline never thickens, and the contents are clipped to the card as it moves, so text never stretches.
• Pressing it again part way through starts from wherever it has got to. Escape closes an open card, and focus that was inside it comes back to its button.
• With reduced motion, it changes size at once.