CountUp

A number that counts to value over 1.5 --motion-durations with --motion-ease, on a client mount and on every change. Server HTML, hydration and reduced motion show the final value at once. While it counts, assistive tech reads only the final value and the final text reserves its width, so the line does not grow digit by digit. Works as the value of a Kpi.

Import

import { CountUp } from "@jcsoftdev/ui/motion";

Usage

export const RevealOnMount: Story = {
  render: () => (
    <Replay>
      {() => (
        <Reveal>
          <Card className="max-w-sm p-card">Welcome back. Three tasks are waiting for you.</Card>
        </Reveal>
      )}
    </Replay>
  ),
};

Source of the Storybook story.

Props

Prop	Type	Default	Description
value *	number
formatter	NumberFormatter		Formats every shown value. Defaults to Intl.NumberFormat in the UI strings locale.
from	number	0	Where a client-side mount starts counting from. Default 0.
ref	Ref<HTMLSpanElement>

* marks a required prop.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Reveal On Mount
• Staggered Cards
• Cross Fade List Detail
• Count Up In AK Pi
• Highlight Rows
• Cross Fade Swaps Keyed Content
• Cross Fade Reduced Motion Swaps At Once
• Count Up Lands On The Formatted Value
• Count Up Reduced Motion Shows The Final Value
• Reveal And Stagger Reduced Motion Are Static
• Stagger Keeps Children In The Accessibility Tree
• Highlight Row Pulses Only New Rows

Source

packages/ui/src/motion/count-up.tsx