A lightweight, customizable wheel picker for React.
npm install simp-wheelA lightweight, customizable wheel picker for React.
!Demo
---
---
``bash`
npm install simp-wheelor
yarn add simp-wheel
---
`
import { useState } from "react";
import { SimpWheel } from "simp-wheel";
const months = [
"January", "February", "March", "April", "May", "June",
"July", "August", "September", "October", "November", "December"
];
const cols = [
{
id: "month",
items: months.map((m, i) => ({ label: m, value: String(i + 1) })),
},
{
id: "day",
items: Array.from({ length: 31 }).map((_, i) => ({
label: String(i + 1),
value: String(i + 1),
})),
},
{
id: "year",
items: Array.from({ length: 100 }).map((_, i) => ({
label: String(i + 2000),
value: String(i + 2000),
})),
},
];
function App() {
const [value, setValue] = useState
return (
Values:{" "}
{JSON.stringify(value)}
export default App;
`
---
`
interface WheelProps {
cols: WheelCol[];
max?: number;
value: string[];
onChange: (values: string[]) => void;
classNames?: {
container?: string; // container style
column?: string; // each column style
item?: string; // each item style
activeRow?: string; // highlighted/selected item style
};
}