@xsolla/xui-input-pin 0.96.0 → 0.97.0
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 +41 -0
- package/package.json +4 -4
package/README.md
ADDED
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
# @xsolla/xui-input-pin
|
|
2
|
+
|
|
3
|
+
PIN / OTP input rendered as a row of individual character cells.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
yarn add @xsolla/xui-input-pin
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## Usage
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
import { InputPin } from '@xsolla/xui-input-pin';
|
|
15
|
+
|
|
16
|
+
<InputPin
|
|
17
|
+
codeLength={6}
|
|
18
|
+
value={pin}
|
|
19
|
+
onChange={({ value }) => setPin(value)}
|
|
20
|
+
onComplete={({ value }) => verify(value)}
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
## Props
|
|
25
|
+
|
|
26
|
+
### InputPin
|
|
27
|
+
|
|
28
|
+
| Prop | Type | Default | Description |
|
|
29
|
+
|------|------|---------|-------------|
|
|
30
|
+
| `value` | `string` | `''` | Controlled value |
|
|
31
|
+
| `codeLength` | `number` | `4` | Number of PIN cells |
|
|
32
|
+
| `onChange` | `(props: OnInputPinCompleteProps) => void` | — | Called on every keystroke with `{ value, isComplete }` |
|
|
33
|
+
| `onComplete` | `(props: OnInputPinCompleteProps) => void` | — | Called when all cells are filled |
|
|
34
|
+
| `size` | `'xl' \| 'lg' \| 'md' \| 'sm' \| 'xs'` | `'md'` | Cell size |
|
|
35
|
+
| `disabled` | `boolean` | — | Disables all cells |
|
|
36
|
+
| `error` | `boolean` | — | Sets the error state on all cells |
|
|
37
|
+
| `label` | `string` | — | Label displayed above the cells |
|
|
38
|
+
| `errorMessage` | `string` | — | Error text displayed below the cells |
|
|
39
|
+
| `secureTextEntry` | `boolean` | `false` | Masks each character |
|
|
40
|
+
| `showPlaceholderDots` | `boolean` | `true` | Shows `•` in empty unfocused cells |
|
|
41
|
+
| `flexibleWidth` | `boolean` | `false` | Expands cells to fill the container width |
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xsolla/xui-input-pin",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.97.0",
|
|
4
4
|
"main": "./web/index.js",
|
|
5
5
|
"module": "./web/index.mjs",
|
|
6
6
|
"types": "./web/index.d.ts",
|
|
@@ -13,9 +13,9 @@
|
|
|
13
13
|
"test:coverage": "vitest run --coverage"
|
|
14
14
|
},
|
|
15
15
|
"dependencies": {
|
|
16
|
-
"@xsolla/xui-button": "0.
|
|
17
|
-
"@xsolla/xui-core": "0.
|
|
18
|
-
"@xsolla/xui-primitives-core": "0.
|
|
16
|
+
"@xsolla/xui-button": "0.97.0",
|
|
17
|
+
"@xsolla/xui-core": "0.97.0",
|
|
18
|
+
"@xsolla/xui-primitives-core": "0.97.0"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
|
21
21
|
"react": ">=16.8.0",
|