@academix-admin/pin-input 0.2.0 → 0.2.1
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 +58 -0
- package/package.json +4 -2
package/README.md
ADDED
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
# @academix-admin/pin-input
|
|
2
|
+
|
|
3
|
+
Headless code entry for React. `PinInput` shows the boxes of an OTP or PIN, and `Keypad` is an on-screen number pad that types into them. Both are accessible, and their focus and paste handling has been tested on iOS and Android. You style every part through a `classNames` map.
|
|
4
|
+
|
|
5
|
+
```sh
|
|
6
|
+
npm install @academix-admin/pin-input
|
|
7
|
+
```
|
|
8
|
+
|
|
9
|
+
React 18 or 19.
|
|
10
|
+
|
|
11
|
+
## PinInput
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { PinInput } from '@academix-admin/pin-input';
|
|
15
|
+
|
|
16
|
+
<PinInput
|
|
17
|
+
length={6}
|
|
18
|
+
value={code}
|
|
19
|
+
onChange={setCode}
|
|
20
|
+
error={wrong}
|
|
21
|
+
loading={verifying}
|
|
22
|
+
classNames={{ container: s.boxes, containerError: s.shake, input: s.box }}
|
|
23
|
+
/>
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
- `value` and `onChange(value)` hold the whole code, and `length` sets how many boxes (default 6).
|
|
27
|
+
- Only digits are taken, typed or pasted. Pasting a full code fills every box. Typing moves to the next box, and Backspace goes back.
|
|
28
|
+
- `error` turns on `classNames.containerError`. `loading` (a verify in flight) disables the boxes and turns on `classNames.containerLoading`.
|
|
29
|
+
- `mask` shows `*` for each digit unless `revealed` is set. Use it for PINs.
|
|
30
|
+
- `autoFocus` (default `true`) focuses the first box on mount, unless `error` is set.
|
|
31
|
+
- `inputProps` is spread onto every box, for example to stop password managers offering to fill them, `data-*` attributes included.
|
|
32
|
+
- **Parts (`PinInputClassNames`):** `container`, `containerError`, `containerLoading` and `input`. `className` is a shortcut for `container`.
|
|
33
|
+
|
|
34
|
+
## Keypad
|
|
35
|
+
|
|
36
|
+
An on-screen number pad that edits the same `value`. Use it for a PIN you don't want the phone's keyboard involved in, such as an app lock.
|
|
37
|
+
|
|
38
|
+
```tsx
|
|
39
|
+
import { Keypad, PinInput } from '@academix-admin/pin-input';
|
|
40
|
+
|
|
41
|
+
<PinInput length={4} value={pin} onChange={setPin} mask revealed={show} autoFocus={false} inputProps={{ readOnly: true }} />
|
|
42
|
+
<Keypad length={4} value={pin} onChange={setPin} showMaskToggle revealed={show} onToggleReveal={setShow} loading={checking} />
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
- `value`, `onChange` and `length` match the PinInput the keypad types into.
|
|
46
|
+
- `disabled` and `error` work as on PinInput.
|
|
47
|
+
- `loading` disables every key and turns on `classNames.loading`. `loadingIndicator` is drawn inside the pad while loading.
|
|
48
|
+
- `showMaskToggle` adds an eye key, with `revealed` and `onToggleReveal(revealed)`.
|
|
49
|
+
- `backspaceLabel` sets the backspace key's content (default `✕`).
|
|
50
|
+
- **Parts (`KeypadClassNames`):** `keypad`, `grid`, `button`, `backspace`, `toggle` and `loading`. `className` is a shortcut for `keypad`.
|
|
51
|
+
|
|
52
|
+
## Exports
|
|
53
|
+
|
|
54
|
+
`PinInput` and `Keypad`, and their types `PinInputProps`, `PinInputClassNames`, `KeypadProps` and `KeypadClassNames`.
|
|
55
|
+
|
|
56
|
+
## License
|
|
57
|
+
|
|
58
|
+
MIT
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@academix-admin/pin-input",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Headless segmented code input (OTP / PIN) + on-screen numeric Keypad — accessible, device-proven focus/paste behavior, style every slot via classNames.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -49,7 +49,9 @@
|
|
|
49
49
|
"build": "tsup",
|
|
50
50
|
"clean": "rimraf dist",
|
|
51
51
|
"dev": "tsup --watch",
|
|
52
|
-
"typecheck": "tsc --noEmit"
|
|
52
|
+
"typecheck": "tsc --noEmit",
|
|
53
|
+
"test": "vitest run",
|
|
54
|
+
"test:watch": "vitest"
|
|
53
55
|
},
|
|
54
56
|
"peerDependencies": {
|
|
55
57
|
"react": ">=18.0.0",
|