Skip to content

Commit 00edd46

Browse files
Damian SznajderDamian Sznajder
Damian Sznajder
authored and
Damian Sznajder
committed
docs: update readme with Clipboard notes
1 parent 99a7b8e commit 00edd46

File tree

4 files changed

+61
-41
lines changed

4 files changed

+61
-41
lines changed

‎README.md

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,20 @@
1515

1616
## Installation
1717

18+
Supported version: `react-native >= 0.59.0`
19+
20+
```bash
21+
yarn add react-native-otp-inputs @react-native-community/clipboard
22+
```
23+
24+
Clipboard module has been extracted from react-native core, so it needs to be installed separately.
25+
Package uses it for autofill feature
26+
After installation run:
27+
28+
```bash
29+
cd ios && pod install
30+
```
31+
1832
| React-Native version | version |
1933
| -------------------- | -------------------------------------- |
2034
| 0.53.0 - 0.56.1 | yarn add react-native-otp-inputs@1.1.0 |
@@ -24,16 +38,16 @@
2438
## Basic usage
2539

2640
```js
27-
import React, { Component } from "react";
28-
import { View } from "react-native";
29-
import OtpInputs from "react-native-otp-inputs";
41+
import React, { Component } from 'react';
42+
import { View } from 'react-native';
43+
import OtpInputs from 'react-native-otp-inputs';
3044

3145
export default class App extends Component {
3246
render() {
3347
return (
3448
<View style={styles.container}>
3549
<OtpInputs
36-
handleChange={code => console.log(code)}
50+
handleChange={(code) => console.log(code)}
3751
numberOfInputs={6}
3852
/>
3953
</View>

‎docs/API.md

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
# API
22

3-
| Method | Type | Required | Default | Description |
4-
| --------------------- | -------------- | ----------- | --------------------------------------- | ------------------------------------------------------------------------ |
5-
| autoCapitalize | string | false | 'none' | |
6-
| autofillFromClipboard | boolean | false | true | You can set it to `false` if want to switch off autofill from clipboard. |
7-
| clearTextOnFocus | boolean | false | false | |
8-
| defaultValue | string | false | | Sets default value for otp inputs |
9-
| handleChange | function | true | console.log | Returns otp code. |
10-
| keyboardType | string | true | 'phone-pad' | |
11-
| numberOfInputs | number | true (1..6) | 4 | Inputs count to render. |
12-
| secureTextEntry | boolean | false | false | |
13-
| selectTextOnFocus | boolean | false | true [iOS Only](./src/OtpInput.tsx#L56) | |
14-
| testIDPrefix | string | false | otpInput-\${inputIndex} | Prefix for testID. |
15-
| isRTL | boolean | false | false | Preferably I18nManager.isRTL. |
16-
| placeholder | string | false | | Placeholder for the input boxes. |
17-
| style | style (object) | false | | Applied to whole container. |
18-
| focusStyles | style (object) | false | | Applied to the input on focus. |
19-
| inputStyles | style(object) | false | | Applied to single input. |
20-
| inputContainerStyles | style (object) | false | | Applied to each input container. |
21-
| ...restTextInputProps | | | | [TextInput](https://facebook.github.io/react-native/docs/textinput) |
3+
| Method | Type | Required | Default | Description |
4+
| --------------------- | -------------- | ----------- | --------------------------------------- | --------------------------------------------------------------------- |
5+
| autoCapitalize | string | false | 'none' | |
6+
| autofillFromClipboard | boolean | false | true | You can set it to `false` if want to disable autofill from clipboard. |
7+
| clearTextOnFocus | boolean | false | false | |
8+
| defaultValue | string | false | | Sets default value for otp inputs |
9+
| handleChange | function | true | console.log | Returns otp code. |
10+
| keyboardType | string | true | 'phone-pad' | |
11+
| numberOfInputs | number | true (1..6) | 4 | Inputs count to render. |
12+
| secureTextEntry | boolean | false | false | |
13+
| selectTextOnFocus | boolean | false | true [iOS Only](./src/OtpInput.tsx#L56) | |
14+
| testIDPrefix | string | false | otpInput-\${inputIndex} | Prefix for testID. |
15+
| isRTL | boolean | false | false | Preferably I18nManager.isRTL. |
16+
| placeholder | string | false | | Placeholder for the input boxes. |
17+
| style | style (object) | false | | Applied to whole container. |
18+
| focusStyles | style (object) | false | | Applied to the input on focus. |
19+
| inputStyles | style(object) | false | | Applied to single input. |
20+
| inputContainerStyles | style (object) | false | | Applied to each input container. |
21+
| ...restTextInputProps | | | | [TextInput](https://facebook.github.io/react-native/docs/textinput) |
2222

2323
# Methods
2424

@@ -54,7 +54,7 @@ export default class App extends Component {
5454
<Button title="Focus" onPress={this.focusOTP} />
5555
<OtpInputs
5656
ref={this.otpRef}
57-
handleChange={code => console.log(code)}
57+
handleChange={(code) => console.log(code)}
5858
numberOfInputs={6}
5959
/>
6060
</View>

‎jest/setup.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
jest.mock('react-native/Libraries/Components/Clipboard/Clipboard', () => ({
1+
jest.mock('@react-native-community/clipboard', () => ({
22
getString: jest.fn(
33
() =>
44
new Promise((resolve) => {

‎src/index.tsx

Lines changed: 22 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import { ActionTypes, OtpInputsRef, ReducerState, Actions } from './types';
2626
import { fillOtpCode } from './helpers';
2727

2828
type Props = TextInputProps & {
29+
autofillFromClipboard: boolean;
2930
keyboardType?:
3031
| 'default'
3132
| 'email-address'
@@ -115,6 +116,7 @@ const styles = StyleSheet.create({
115116
const OtpInputs = forwardRef<OtpInputsRef, Props>(
116117
(
117118
{
119+
autofillFromClipboard = true,
118120
autoCapitalize = 'none',
119121
clearTextOnFocus = false,
120122
defaultValue,
@@ -134,6 +136,8 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
134136
},
135137
ref,
136138
) => {
139+
const previousCopiedText = useRef<string>('');
140+
const inputs = useRef<Array<RefObject<TextInput>>>([]);
137141
const [{ otpCode, hasKeySupport }, dispatch] = useReducer(
138142
reducer,
139143
{},
@@ -143,8 +147,6 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
143147
hasKeySupport: Platform.OS === 'ios',
144148
}),
145149
);
146-
const previousCopiedText: { current: string } = useRef('');
147-
const inputs: { current: Array<RefObject<TextInput>> } = useRef([]);
148150

149151
useEffect(() => {
150152
dispatch({ type: ACTION_TYPES.setHandleChange, payload: handleChange });
@@ -167,16 +169,6 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
167169
[numberOfInputs],
168170
);
169171

170-
const handleTextChange = (text: string, index: number) => {
171-
if (
172-
(Platform.OS === 'android' && !hasKeySupport) ||
173-
// Pasted from input accessory
174-
(Platform.OS === 'ios' && text.length > 1)
175-
) {
176-
handleInputTextChange(text, index);
177-
}
178-
};
179-
180172
const handleInputTextChange = (text: string, index: number): void => {
181173
if (!text.length) {
182174
handleClearInput(index);
@@ -204,6 +196,16 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
204196
}
205197
};
206198

199+
const handleTextChange = (text: string, index: number) => {
200+
if (
201+
(Platform.OS === 'android' && !hasKeySupport) ||
202+
// Pasted from input accessory
203+
(Platform.OS === 'ios' && text.length > 1)
204+
) {
205+
handleInputTextChange(text, index);
206+
}
207+
};
208+
207209
const handleKeyPress = (
208210
{
209211
nativeEvent: { key },
@@ -268,14 +270,18 @@ const OtpInputs = forwardRef<OtpInputsRef, Props>(
268270
}, [fillInputs, numberOfInputs, otpCode]);
269271

270272
useEffect(() => {
271-
const interval = setInterval(() => {
272-
listenOnCopiedText();
273-
}, 500);
273+
let interval: NodeJS.Timeout;
274+
275+
if (autofillFromClipboard) {
276+
interval = setInterval(() => {
277+
listenOnCopiedText();
278+
}, 500);
279+
}
274280

275281
return () => {
276282
clearInterval(interval);
277283
};
278-
}, [listenOnCopiedText, numberOfInputs]);
284+
}, [autofillFromClipboard, listenOnCopiedText, numberOfInputs]);
279285

280286
const renderInputs = (): Array<JSX.Element> => {
281287
const iterationArray = Array<number>(numberOfInputs).fill(0);

0 commit comments

Comments
 (0)