@ncdai/react-wheel-picker 1.0.1 → 1.0.3

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.
Files changed (2) hide show
  1. package/README.md +39 -151
  2. package/package.json +11 -4
package/README.md CHANGED
@@ -1,70 +1,32 @@
1
- # react-wheel-picker
1
+ # React Wheel Picker
2
2
 
3
3
  iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.
4
4
 
5
- ## Installation
5
+ Check out the live demo: https://chanhdai.com/blog/react-wheel-picker
6
+
7
+ ## Usage
8
+
9
+ To start using the library, install it in your project:
6
10
 
7
11
  ```bash
8
- npm install @ncdai/react-wheel-picker
12
+ pnpm add @ncdai/react-wheel-picker
9
13
  # or
10
14
  yarn add @ncdai/react-wheel-picker
11
15
  # or
12
- pnpm add @ncdai/react-wheel-picker
13
- ```
14
-
15
- ## Anatomy
16
-
17
- The wheel picker consists of two main components:
18
-
19
- ### WheelPickerWrapper
20
-
21
- The wrapper component that contains one or more wheel pickers. It provides the container structure and handles the layout of multiple wheels.
22
-
23
- ```tsx
24
- <WheelPickerWrapper>
25
- <WheelPicker />
26
- <WheelPicker />
27
- <WheelPicker />
28
- </WheelPickerWrapper>
29
- ```
30
-
31
- ### WheelPicker
32
-
33
- The core component that renders a single wheel of options. Each wheel picker consists of:
34
-
35
- - A container with a 3D perspective
36
- - A scrollable list of options
37
- - A highlight area that indicates the selected option
38
- - A mask that creates the fade effect at the top and bottom
39
-
40
- ```tsx
41
- <WheelPicker
42
- options={[
43
- { label: "Option 1", value: "1" },
44
- { label: "Option 2", value: "2" },
45
- ]}
46
- value="1"
47
- onValueChange={(value) => {}}
48
- />
16
+ npm install @ncdai/react-wheel-picker
17
+ # or
18
+ bun add @ncdai/react-wheel-picker
49
19
  ```
50
20
 
51
- > **Styling:** The component is unstyled by default. You can customize the appearance using the `classNames` prop to style:
52
- >
53
- > - Individual options (`optionItem`)
54
- > - The highlight area (`highlightWrapper`)
55
- > - The highlighted option (`highlightItem`)
56
- >
57
- > Check out the TailwindCSS example below to see how to style the component.
58
-
59
- ## Usage
60
-
61
- 1. Import CSS:
21
+ Add the core CSS to your app's entry point (e.g., `src/app/layout.tsx`, `src/main.tsx`, or `src/index.tsx`):
62
22
 
63
23
  ```tsx
64
24
  import "@ncdai/react-wheel-picker/dist/style.css";
65
25
  ```
66
26
 
67
- 2. Import components:
27
+ > This CSS includes only basic layout. Use classNames to customize visuals (see below).
28
+
29
+ Use the component in your app:
68
30
 
69
31
  ```tsx
70
32
  import {
@@ -73,114 +35,40 @@ import {
73
35
  type WheelPickerOption,
74
36
  type WheelPickerClassNames,
75
37
  } from "@ncdai/react-wheel-picker";
76
- ```
77
-
78
- 3. Example with TailwindCSS:
79
38
 
80
- ```tsx
81
- const createArray = (length: number, add = 0): WheelPickerOption[] =>
82
- Array.from({ length }, (_, i) => {
83
- const value = i + add;
84
- return {
85
- label: value.toString().padStart(2, "0"),
86
- value: value.toString(),
87
- };
88
- });
89
-
90
- const hourOptions = createArray(12, 1);
91
- const minuteOptions = createArray(60);
92
- const meridiemOptions: WheelPickerOption[] = [
93
- { label: "AM", value: "AM" },
94
- { label: "PM", value: "PM" },
39
+ const options: WheelPickerOption[] = [
40
+ {
41
+ label: "React",
42
+ value: "react",
43
+ },
44
+ {
45
+ label: "Vue",
46
+ value: "vue",
47
+ },
48
+ {
49
+ label: "Angular",
50
+ value: "angular",
51
+ },
52
+ {
53
+ label: "Svelte",
54
+ value: "svelte",
55
+ },
95
56
  ];
96
57
 
97
58
  const classNames: WheelPickerClassNames = {
98
- optionItem: "text-muted-foreground",
99
- highlightWrapper: "bg-accent text-accent-foreground",
59
+ optionItem: "text-zinc-400",
60
+ highlightWrapper: "bg-zinc-100 text-zinc-950",
100
61
  };
101
62
 
102
- export function TimePicker() {
103
- const [hour, setHour] = useState("8");
104
- const [minute, setMinute] = useState("30");
105
- const [meridiem, setMeridiem] = useState("PM");
106
-
63
+ export function WheelPickerDemo() {
107
64
  return (
108
- <div className="container mx-auto space-y-4 p-4">
109
- <div className="mx-auto flex h-8 max-w-56 items-center justify-center text-lg font-semibold">
110
- {hour.padStart(2, "0")}:{minute.padStart(2, "0")} {meridiem}
111
- </div>
112
-
113
- <WheelPickerWrapper className="mx-auto max-w-56 rounded-xl border bg-background">
114
- <WheelPicker
115
- options={hourOptions}
116
- value={hour}
117
- onValueChange={setHour}
118
- infinite
119
- classNames={classNames}
120
- />
121
- <WheelPicker
122
- options={minuteOptions}
123
- value={minute}
124
- onValueChange={setMinute}
125
- infinite
126
- classNames={classNames}
127
- />
128
- <WheelPicker
129
- options={meridiemOptions}
130
- value={meridiem}
131
- onValueChange={setMeridiem}
132
- classNames={classNames}
133
- />
134
- </WheelPickerWrapper>
135
- </div>
65
+ <WheelPickerWrapper className="max-w-56 rounded-md border border-zinc-200 bg-white shadow-xs">
66
+ <WheelPicker options={options} classNames={classNames} />
67
+ </WheelPickerWrapper>
136
68
  );
137
69
  }
138
70
  ```
139
71
 
140
- > View the complete source code at [https://github.com/ncdai/react-wheel-picker/tree/main/website](https://github.com/ncdai/react-wheel-picker/tree/main/website)
141
-
142
- ## API
143
-
144
- ### WheelPicker
72
+ ## Documentation
145
73
 
146
- Props for the WheelPicker component:
147
-
148
- | Prop | Type | Default | Description |
149
- | ----------------- | ------------------------- | ---------- | -------------------------------------------------------------- |
150
- | `options` | `WheelPickerOption[]` | (required) | Array of options to display in the wheel |
151
- | `value` | `string` | - | Current value of the picker (controlled mode) |
152
- | `defaultValue` | `string` | - | Default value of the picker (uncontrolled mode) |
153
- | `onValueChange` | `(value: string) => void` | - | Callback fired when the selected value changes |
154
- | `infinite` | `boolean` | `false` | Enable infinite scrolling |
155
- | `visibleCount` | `number` | `20` | Number of options visible on the wheel (must be multiple of 4) |
156
- | `dragSensitivity` | `number` | `3` | Sensitivity of the drag interaction (higher = more sensitive) |
157
- | `classNames` | `WheelPickerClassNames` | - | Custom class names for styling |
158
-
159
- ### WheelPickerWrapper
160
-
161
- Props for the WheelPickerWrapper component:
162
-
163
- | Prop | Type | Default | Description |
164
- | ----------- | ----------------- | ---------- | -------------------------- |
165
- | `className` | `string` | - | CSS class name for wrapper |
166
- | `children` | `React.ReactNode` | (required) | WheelPicker components |
167
-
168
- ### Types
169
-
170
- ```tsx
171
- type WheelPickerOption = {
172
- /** Value that will be returned when this option is selected */
173
- value: string;
174
- /** Text label displayed for this option */
175
- label: string;
176
- };
177
-
178
- type WheelPickerClassNames = {
179
- /** Class name for individual option items */
180
- optionItem?: string;
181
- /** Class name for the wrapper of the highlighted area */
182
- highlightWrapper?: string;
183
- /** Class name for the highlighted item */
184
- highlightItem?: string;
185
- };
186
- ```
74
+ Find the full API reference in the [documentation](https://react-wheel-picker.chanhdai.com/docs/getting-started).
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ncdai/react-wheel-picker",
3
- "version": "1.0.1",
3
+ "version": "1.0.3",
4
4
  "description": "iOS-like wheel picker for React with smooth inertia scrolling and infinite loop support.",
5
5
  "main": "./dist/index.js",
6
6
  "types": "./dist/index.d.ts",
@@ -27,11 +27,18 @@
27
27
  "type-check": "tsc --noEmit",
28
28
  "copy-assets": "cp -r ./src/style.css ./dist/style.css",
29
29
  "dev:website": "turbo run dev --filter=website...",
30
- "lint": "eslint . --ext .ts,.tsx --ignore-pattern 'website/**'",
30
+ "prettier:check": "prettier --check .",
31
31
  "format": "prettier --write .",
32
+ "registry:internal:build": "pnpm --filter=website registry:internal:build",
33
+ "registry:build": "pnpm --filter=website registry:build",
32
34
  "test": "echo \"Error: no test specified\" && exit 1"
33
35
  },
34
- "keywords": [],
36
+ "keywords": [
37
+ "react",
38
+ "wheel picker",
39
+ "wheel",
40
+ "picker"
41
+ ],
35
42
  "author": "Nguyen Chanh Dai <dai@chanhdai.com>",
36
43
  "license": "MIT",
37
44
  "homepage": "https://react-wheel-picker.chanhdai.com",
@@ -55,4 +62,4 @@
55
62
  "peerDependencies": {
56
63
  "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc"
57
64
  }
58
- }
65
+ }