@ncdai/react-wheel-picker 1.0.9 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +2 -67
- package/package.json +3 -2
package/README.md
CHANGED
|
@@ -8,76 +8,11 @@ iOS-like wheel picker for React with smooth inertia scrolling and infinite loop
|
|
|
8
8
|
- 🎨 Unstyled components for complete style customization
|
|
9
9
|
- ⚡️ Easy installation via shadcn CLI
|
|
10
10
|
|
|
11
|
-
Check out the live demo: https://
|
|
12
|
-
|
|
13
|
-
## Usage
|
|
14
|
-
|
|
15
|
-
To start using the library, install it in your project:
|
|
16
|
-
|
|
17
|
-
```bash
|
|
18
|
-
pnpm add @ncdai/react-wheel-picker
|
|
19
|
-
# or
|
|
20
|
-
yarn add @ncdai/react-wheel-picker
|
|
21
|
-
# or
|
|
22
|
-
npm install @ncdai/react-wheel-picker
|
|
23
|
-
# or
|
|
24
|
-
bun add @ncdai/react-wheel-picker
|
|
25
|
-
```
|
|
26
|
-
|
|
27
|
-
Add the core CSS to your app's entry point (e.g., `src/app/layout.tsx`, `src/main.tsx`, or `src/index.tsx`):
|
|
28
|
-
|
|
29
|
-
```tsx
|
|
30
|
-
import "@ncdai/react-wheel-picker/style.css";
|
|
31
|
-
```
|
|
32
|
-
|
|
33
|
-
> This CSS includes only basic layout. Use `classNames` to customize visuals (see below).
|
|
34
|
-
|
|
35
|
-
Use the component in your app:
|
|
36
|
-
|
|
37
|
-
```tsx
|
|
38
|
-
import {
|
|
39
|
-
WheelPicker,
|
|
40
|
-
WheelPickerWrapper,
|
|
41
|
-
type WheelPickerOption,
|
|
42
|
-
type WheelPickerClassNames,
|
|
43
|
-
} from "@ncdai/react-wheel-picker";
|
|
44
|
-
|
|
45
|
-
const options: WheelPickerOption[] = [
|
|
46
|
-
{
|
|
47
|
-
label: "React",
|
|
48
|
-
value: "react",
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
label: "Vue",
|
|
52
|
-
value: "vue",
|
|
53
|
-
},
|
|
54
|
-
{
|
|
55
|
-
label: "Angular",
|
|
56
|
-
value: "angular",
|
|
57
|
-
},
|
|
58
|
-
{
|
|
59
|
-
label: "Svelte",
|
|
60
|
-
value: "svelte",
|
|
61
|
-
},
|
|
62
|
-
];
|
|
63
|
-
|
|
64
|
-
const classNames: WheelPickerClassNames = {
|
|
65
|
-
optionItem: "text-zinc-400",
|
|
66
|
-
highlightWrapper: "bg-zinc-100 text-zinc-950",
|
|
67
|
-
};
|
|
68
|
-
|
|
69
|
-
export function WheelPickerDemo() {
|
|
70
|
-
return (
|
|
71
|
-
<WheelPickerWrapper className="max-w-56 rounded-md border border-zinc-200 bg-white shadow-xs">
|
|
72
|
-
<WheelPicker options={options} classNames={classNames} />
|
|
73
|
-
</WheelPickerWrapper>
|
|
74
|
-
);
|
|
75
|
-
}
|
|
76
|
-
```
|
|
11
|
+
Check out the live demo: https://react-wheel-picker.chanhdai.com
|
|
77
12
|
|
|
78
13
|
## Documentation
|
|
79
14
|
|
|
80
|
-
|
|
15
|
+
Please read the [documentation](https://react-wheel-picker.chanhdai.com/docs/getting-started) for setup and API usage.
|
|
81
16
|
|
|
82
17
|
## License
|
|
83
18
|
|
package/package.json
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ncdai/react-wheel-picker",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.10",
|
|
4
4
|
"description": "iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.",
|
|
5
5
|
"publishConfig": {
|
|
6
|
-
"access": "public"
|
|
6
|
+
"access": "public",
|
|
7
|
+
"provenance": true
|
|
7
8
|
},
|
|
8
9
|
"type": "commonjs",
|
|
9
10
|
"main": "./dist/index.js",
|