Skip to content

Commit

Permalink
docs: add placeholder and placeholderTextStyle props
Browse files Browse the repository at this point in the history
  • Loading branch information
@anday013
anday013 committed Dec 8, 2024
1 parent 88ff1b1 commit 064f4e8
Showing 1 changed file with 13 additions and 11 deletions.
24 changes: 13 additions & 11 deletions README.MD
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,30 +83,32 @@ The `react-native-otp-entry` component accepts the following props:
| Prop | Type | Description |
| ---------------------------- | -------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| `numberOfDigits` | number | The number of digits to be displayed in the OTP entry. |
| `textInputProps` | TextInputProps | Extra props passed to underlying hidden TextInput (see: https://reactnative.dev/docs/textinput) |
| `theme` | Theme | Custom styles for each element. (See below) |
| `textInputProps` | TextInputProps | Extra props passed to underlying hidden TextInput (see: <https://reactnative.dev/docs/textinput>) |
| `autoFocus` | boolean | _Default: true_. Sets autofocus. |
| `focusColor` | ColorValue | The color of the input field border and stick when it is focused. |
| `placeholder` | string | Placeholder value to the input. |
| `onTextChange` | (text: string) => void | A callback function is invoked when the OTP text changes. It receives the updated text as an argument. |
| `onFilled` | (text: string) => void | A callback function is invoked when the OTP input is fully filled. It receives a full otp code as an argument. |
| `blurOnFilled` | boolean | _Default: false_. Blurs (unfocuses) the input when the OTP input is fully filled. |
| `hideStick` | boolean | _Default: false_. Hides cursor of the focused input. |
| `theme` | Theme | Custom styles for each element. |
| `focusStickBlinkingDuration` | number | The duration (in milliseconds) for the focus stick to blink. |
| `disabled` | boolean | _Default: false_. Disables the input |
| `type` | 'alpha' \| 'numeric' \| 'alphanumeric' | The type of input. 'alpha': letters only, 'numeric': numbers only, 'alphanumeric': letters or numbers. |
| `secureTextEntry` | boolean | _Default: false_. Obscures the text entered so that sensitive text like PIN stay secure. |
| `onFocus` | () => void | A callback function is invoked when the OTP input is focused. |
| `onBlur` | () => void | A callback function is invoked when the OTP input is blurred. |

| Theme | Type | Description |
| ------------------------------- | --------- | ---------------------------------------------------------------------------------- |
| `containerStyle` | ViewStyle | Custom styles for the root `View`. |
| `pinCodeContainerStyle` | ViewStyle | Custom styles for the container that wraps each individual digit in the OTP entry. |
| `pinCodeTextStyle` | TextStyle | Custom styles for the text within each individual digit in the OTP entry. |
| `focusStickStyle` | ViewStyle | Custom styles for the focus stick, which indicates the focused input field. |
| `focusedPinCodeContainerStyle` | ViewStyle | Custom styles for the input field when it is focused. |
| `filledPinCodeContainerStyle` | ViewStyle | Custom styles for the input field when it has a value. |
| `disabledPinCodeContainerStyle` | ViewStyle | Custom styles for the input field when it is disabled. |
| Theme | Type | Description |
| ------------------------------- | --------- | ------------------------------------------------------------------------------------- |
| `containerStyle` | ViewStyle | Custom styles for the root `View`. |
| `pinCodeContainerStyle` | ViewStyle | Custom styles for the container that wraps each individual digit in the OTP entry. |
| `pinCodeTextStyle` | TextStyle | Custom styles for the text within each individual digit in the OTP entry. |
| `placeholderTextStyle` | TextStyle | Custom styles for the placeholder text within each individual digit in the OTP entry. |
| `focusStickStyle` | ViewStyle | Custom styles for the focus stick, which indicates the focused input field. |
| `focusedPinCodeContainerStyle` | ViewStyle | Custom styles for the input field when it is focused. |
| `filledPinCodeContainerStyle` | ViewStyle | Custom styles for the input field when it has a value. |
| `disabledPinCodeContainerStyle` | ViewStyle | Custom styles for the input field when it is disabled. |

**Note:** The `ViewStyle` and `TextStyle` types are imported from `react-native` and represent the style objects used in React Native for views and text, respectively.

Expand Down

0 comments on commit 064f4e8

Please sign in to comment.