Controls & Inputs

Physics Number Picker

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

Preview

value control

drag or scroll to settle

Installation

bash

Copied

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

bash

Copied

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

bash

Copied

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

bash

Copied

1bunx shadcn@latest add https://ryong.dev/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

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