Input
import NumberFlow from '@number-flow/react'
import clsx from 'clsx/lite'
import { Minus, Plus } from 'lucide-react'
import * as React from 'react'
type Props = {
value?: number
min?: number
max?: number
onChange?: (value: number) => void
}
export default function Input({ value = 0, min = -Infinity, max = Infinity, onChange }: Props) {
const defaultValue = React.useRef(value)
const inputRef = React.useRef<HTMLInputElement>(null)
const [animated, setAnimated] = React.useState(true)
// Hide the caret during transitions so you can't see it shifting around:
const [showCaret, setShowCaret] = React.useState(true)
const handleInput: React.ChangeEventHandler<HTMLInputElement> = ({ currentTarget: el }) => {
setAnimated(false)
if (el.value === '') {
onChange?.(defaultValue.current)
return
}
const num = parseInt(el.value)
if (isNaN(num) || (min != null && num < min) || (max != null && num > max)) {
// Revert input's value:
el.value = String(value)
} else {
// Manually update value in case they i.e. start with a "0" or end with a "."
// which won't trigger a DOM update (because the number is the same):
el.value = String(num)
onChange?.(num)
}
}
const handlePointerDown = (diff: number) => (event: React.PointerEvent<HTMLButtonElement>) => {
setAnimated(true)
if (event.pointerType === 'mouse') {
event?.preventDefault()
inputRef.current?.focus()
}
const newVal = Math.min(Math.max(value + diff, min), max)
onChange?.(newVal)
}
return (
<div className="group flex items-stretch rounded-md text-3xl font-semibold ring ring-zinc-200 transition-[box-shadow] focus-within:ring-2 focus-within:ring-blue-500 dark:ring-zinc-800">
<button
aria-hidden
tabIndex={-1}
className="flex items-center pl-[.5em] pr-[.325em]"
disabled={min != null && value <= min}
onPointerDown={handlePointerDown(-1)}
>
<Minus className="size-4" absoluteStrokeWidth strokeWidth={3.5} />
</button>
<div className="relative grid items-center justify-items-center text-center [grid-template-areas:'overlap'] *:[grid-area:overlap]">
<input
ref={inputRef}
className={clsx(
showCaret ? 'caret-primary' : 'caret-transparent',
'spin-hide w-[1.5em] bg-transparent py-2 text-center font-[inherit] text-transparent outline-none'
)}
// Make sure to disable kerning, to match NumberFlow:
style={{ fontKerning: 'none' }}
type="number"
min={min}
step={1}
autoComplete="off"
inputMode="numeric"
max={max}
value={value}
onInput={handleInput}
/>
<NumberFlow
value={value}
format={{ useGrouping: false }}
aria-hidden
animated={animated}
onAnimationsStart={() => setShowCaret(false)}
onAnimationsFinish={() => setShowCaret(true)}
className="pointer-events-none"
willChange
/>
</div>
<button
aria-hidden
tabIndex={-1}
className="flex items-center pl-[.325em] pr-[.5em]"
disabled={max != null && value >= max}
onPointerDown={handlePointerDown(1)}
>
<Plus className="size-4" absoluteStrokeWidth strokeWidth={3.5} />
</button>
</div>
)
}
Activity
import NumberFlow, { type Format } from '@number-flow/react'
import clsx from 'clsx/lite'
import { Bookmark, ChartNoAxesColumn, Heart, Repeat, Share } from 'lucide-react'
const format: Format = {
notation: 'compact',
compactDisplay: 'short',
roundingMode: 'trunc'
}
type Props = {
likes: number
reposts: number
views: number
bookmarks: number
liked: boolean
reposted: boolean
bookmarked: boolean
onLike: () => void
onBookmark: () => void
onRepost: () => void
}
export default function Activity({
likes,
reposts,
views,
bookmarks,
onLike,
onRepost,
onBookmark,
liked,
reposted,
bookmarked
}: Props) {
return (
<div className="~px-0/16 ~text-[0.8125rem]/sm flex w-full select-none items-center text-zinc-600 dark:text-zinc-300">
<div className="flex flex-1 items-center gap-1.5">
<ChartNoAxesColumn absoluteStrokeWidth className="~size-4/5" />
<NumberFlow willChange value={views} format={format} />
</div>
<div className="flex-1">
<button
className={clsx(
'group flex items-center gap-1.5 pr-1.5 transition-[color] hover:text-emerald-500',
reposted && 'text-emerald-500'
)}
onClick={onRepost}
>
<div className="relative before:absolute before:-inset-2.5 before:rounded-full before:transition-[background-color] before:group-hover:bg-emerald-500/10">
<Repeat
absoluteStrokeWidth
className="~size-4/5 group-active:spring-duration-[25] spring-bounce-50 spring-duration-300 transition-transform group-active:scale-[85%]"
/>
</div>
<NumberFlow willChange value={reposts} format={format} />
</button>
</div>
<div className="flex-1">
<button
className={clsx(
'group flex items-center gap-1.5 pr-1.5 transition-[color] hover:text-pink-500',
liked && 'text-pink-500'
)}
onClick={onLike}
>
<div className="relative before:absolute before:-inset-2.5 before:rounded-full before:transition-[background-color] before:group-hover:bg-pink-500/10">
<Heart
absoluteStrokeWidth
className={clsx(
'~size-4/5 group-active:spring-duration-[25] spring-bounce-[65] spring-duration-300 transition-transform group-active:scale-[80%]',
liked && 'fill-current'
)}
/>
</div>
<NumberFlow willChange value={likes} format={format} />
</button>
</div>
<div className="flex flex-1 items-center gap-1.5">
<button
className={clsx(
'group flex items-center gap-1.5 pr-1.5 transition-[color] hover:text-blue-500',
bookmarked && 'text-blue-500'
)}
onClick={onBookmark}
>
<div className="relative before:absolute before:-inset-2.5 before:rounded-full before:transition-[background-color] before:group-hover:bg-blue-500/10">
<Bookmark
absoluteStrokeWidth
className={clsx(
'~size-4/5 group-active:spring-duration-[25] spring-bounce-50 spring-duration-300 transition-transform group-active:scale-[85%]',
bookmarked && 'fill-current'
)}
/>
</div>
<NumberFlow willChange value={bookmarks} format={format} />
</button>
</div>
<Share absoluteStrokeWidth className="~size-4/5 shrink-0" />
</div>
)
}
Slider
import NumberFlow from '@number-flow/react'
import * as RadixSlider from '@radix-ui/react-slider'
import clsx from 'clsx/lite'
export default function Slider({ value, className, ...props }: RadixSlider.SliderProps) {
return (
<RadixSlider.Root
{...props}
value={value}
className={clsx(className, 'relative flex h-5 w-[200px] touch-none select-none items-center')}
>
<RadixSlider.Track className="relative h-[3px] grow rounded-full bg-zinc-100 dark:bg-zinc-800">
<RadixSlider.Range className="absolute h-full rounded-full bg-black dark:bg-white" />
</RadixSlider.Track>
<RadixSlider.Thumb
className="relative block h-5 w-5 rounded-[1rem] bg-white shadow-md ring ring-black/10"
aria-label="Volume"
>
{value?.[0] != null && (
<NumberFlow
willChange
value={value[0]}
isolate
opacityTiming={{
duration: 250,
easing: 'ease-out'
}}
transformTiming={{
easing: `linear(0, 0.0033 0.8%, 0.0263 2.39%, 0.0896 4.77%, 0.4676 15.12%, 0.5688, 0.6553, 0.7274, 0.7862, 0.8336 31.04%, 0.8793, 0.9132 38.99%, 0.9421 43.77%, 0.9642 49.34%, 0.9796 55.71%, 0.9893 62.87%, 0.9952 71.62%, 0.9983 82.76%, 0.9996 99.47%)`,
duration: 500
}}
className="absolute bottom-8 left-1/2 -translate-x-1/2 text-lg font-semibold"
/>
)}
</RadixSlider.Thumb>
</RadixSlider.Root>
)
}
Framer Motion
NumberFlow was designed to integrate with Framer Motion layout animations.
You can use a { type: 'spring', duration: 0.9, bounce: 0 } transition to match NumberFlow’s default transform timing:
import { motion } from 'framer-motion'
import NumberFlow, { useCanAnimate } from '@number-flow/react'
import { ArrowUp } from 'lucide-react'
const MotionNumberFlow = motion.create(NumberFlow)
const MotionArrowUp = motion.create(ArrowUp)
type Props = {
value: number
diff: number
}
export default function PriceWithDiff({ value, diff }: Props) {
// Disable layout animations if NumberFlow can't animate:
const canAnimate = useCanAnimate()
return (
<span style={{ '--number-flow-char-height': '0.85em' }} className="flex items-center gap-2">
<NumberFlow
value={value}
className="~text-xl/4xl font-semibold"
format={{ style: 'currency', currency: 'USD' }}
/>
<motion.span
animate={{ backgroundColor: diff > 0 ? '#34d399' : '#ef4444' }}
initial={false}
className="~text-base/2xl inline-flex items-center px-[0.3em] text-white"
style={{ borderRadius: 999 }}
layout={canAnimate}
transition={{ layout: { duration: 0.9, bounce: 0, type: 'spring' } }}
>
<MotionArrowUp
className="mr-0.5 size-[0.75em]"
absoluteStrokeWidth
strokeWidth={3}
transition={{ rotate: { type: 'spring', duration: 0.5, bounce: 0 } }}
animate={{ rotate: diff > 0 ? 0 : -180 }}
initial={false}
/>
<MotionNumberFlow
value={diff}
className="font-semibold"
format={{ style: 'percent', maximumFractionDigits: 2 }}
style={{ '--number-flow-mask-height': '0.3em' }}
// Important, see note below:
layout={canAnimate}
layoutRoot={canAnimate}
/>
</motion.span>
</span>
)
}
Note: whenever NumberFlow is used within a layout animation it must be (or be in) a
motion component with the
layout layoutRoot
props.