Morph Text

Usage

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

<button aria-label={open ? 'Close menu' : 'Open menu'}>
  <MorphText text={open ? 'Close' : 'Menu'} />
</button>

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

Props

textstring

What it says. Changing it runs the morph.

classNamestring

Added to its root.

Notes

• It’s hidden from screen readers, so name its parent instead, as in the example above.
• Repeats of a letter get their own keys, so it can tell which ones carry over.
• The width eases across on a small spring, so whatever’s next to it moves too. Reserve the wider word’s space if it shouldn’t.
• With reduced motion, it just changes.