Controls & Inputs

Physics Number Picker

관성 스크롤과 스냅 물리를 결합한 숫자 선택 입력 컴포넌트입니다.

Preview

value control

drag or scroll to settle

Installation

bash

Copied

1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/physics-number-picker.json

bash

Copied

1npx shadcn@latest add https://ryong-blog.vercel.app/r/physics-number-picker.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong-blog.vercel.app/r/physics-number-picker.json

bash

Copied

1bunx shadcn@latest add https://ryong-blog.vercel.app/r/physics-number-picker.json

Code

typescript

Copied

1"use client"23import { useState } from "react"4import { PhysicsNumberPicker } from "@/components/physics-number-picker"56export default function Example() {7  const [value, setValue] = useState(24)89  return (10    <PhysicsNumberPicker11      value={value}12      min={0}13      max={59}14      onValueChange={setValue}15    />16  )17}

Props

className

Type: string
Default: -
Description: Additional classes merged onto the component.

value

Type: number
Default: -
Description: Controlled selected value.

defaultValue

Type: number
Default: -
Description: Initial value for uncontrolled usage.

min

Type: number
Default: 0
Description: Minimum selectable value.

max

Type: number
Default: 59
Description: Maximum selectable value.

onValueChange

Type: (value: number) => void
Default: -
Description: Called when the picker snaps to a new value.

wrap

Type: boolean
Default: true
Description: Whether values loop from max to min.

itemHeight

Type: number
Default: 56
Description: Height of each picker row in pixels.

visibleItems

Type: 5 | 7 | 9
Default: 7
Description: Odd number of visible rows.

formatValue

Type: (value: number, isSelected: boolean) => React.ReactNode
Default: -
Description: Custom renderer for each value.

label

Type: string
Default: "Number picker"
Description: Accessible spinbutton label.

style

Type: React.CSSProperties
Default: -
Description: Inline style and picker CSS variables.

Prop	Type	Default	Description
className	string	-	Additional classes merged onto the component.
value	number	-	Controlled selected value.
defaultValue	number	-	Initial value for uncontrolled usage.
min	number	0	Minimum selectable value.
max	number	59	Maximum selectable value.
onValueChange	(value: number) => void	-	Called when the picker snaps to a new value.
wrap	boolean	true	Whether values loop from max to min.
itemHeight	number	56	Height of each picker row in pixels.
visibleItems	5 \| 7 \| 9	7	Odd number of visible rows.
formatValue	(value: number, isSelected: boolean) => React.ReactNode	-	Custom renderer for each value.
label	string	"Number picker"	Accessible spinbutton label.
style	React.CSSProperties	-	Inline style and picker CSS variables.

Reference

OpenRun ChainPicker