Skip to content

Commit

Permalink
docs: add documentation for new props
Browse files Browse the repository at this point in the history
  • Loading branch information
@SectionTN
SectionTN committed Mar 22, 2024
1 parent eec24e3 commit 7819ede
Showing 1 changed file with 20 additions and 15 deletions.
35 changes: 20 additions & 15 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,21 +81,26 @@ import { Platform } from 'react-native';

There's no required prop as you can see, if you pass an empty props eg, `<OTPTextInput />`, the component will work with the default values.

| Prop name | Type | Default Value | Description |
|:--------------------|:--------------------|:--------------|:-------------------------------------------------------------------------------|
| defaultValue | string | " " | The default value for the OTP input |
| inputCount | number | 4 | The number of OTP input fields |
| tintColor | string | '#566193' | The color of the focused OTP input field |
| offTintColor | string | '#DADADA' | The color of the non-focused OTP input fields |
| inputMaxLength | number | 1 | The maximum length of each OTP input field |
| containerStyle | object | {} | The custom style for the OTP container component |
| textInputStyle | object | {} | The custom style for the OTP text inputs |
| onTextChangeHandler | function | undefined | Call back function to handle OTP text change |
| onBlur | function | undefined | Called when an input field loses focus |
| onFocus | function | undefined | Called when an input field gets focus |
| keyboardType | KeyboardTypeOptions | 'numeric' | Determines the type of keyboard to be displayed |
| editable | boolean | true | Determines whether or not the OTP input is editable |
| autoFocus | boolean | true | Determines whether or not the first input field should automatically get focus |
| Prop name | Type | Default Value | Description |
|:--------------------|:--------------------|:--------------|:---------------------------------------------------------------------------------|
| defaultValue | string | " " | The default value for the OTP input |
| inputCount | number | 4 | The number of OTP input fields |
| tintColor | string | '#566193' | The color of the focused OTP input field |
| offTintColor | string | '#DADADA' | The color of the non-focused OTP input fields |
| inputMaxLength | number | 1 | The maximum length of each OTP input field |
| containerStyle | object | {} | The custom style for the OTP container component |
| textInputStyle | object | {} | The custom style for the OTP text inputs |
| onTextChangeHandler | function | undefined | Call back function to handle OTP text change |
| onBlur | function | undefined | Called when an input field loses focus |
| onFocus | function | undefined | Called when an input field gets focus |
| keyboardType | KeyboardTypeOptions | 'numeric' | Determines the type of keyboard to be displayed |
| editable | boolean | true | Determines whether or not the OTP input is editable |
| autoFocus | boolean | true | Determines whether or not the first input field should automatically get focus |
| useNumbersRegex | boolean | true | If true, the input will be validated against a default number-based regex |
| useCustomRegex | boolean | false | If true, a custom regex set by customRegex prop will be used for validation |
| customRegex | RegExp | '\\d*' | This provides the custom regex for input validation when useCustomRegex is true. |

**NB**: you cannot use both `useNumbersRegex` and `useCustomRegex` at the same time.

## 🔍 Example

Expand Down

0 comments on commit 7819ede

Please sign in to comment.