Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add: new boolean type prop to consider or not consider spaces as valid characters in OTP input #397

Closed
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,6 +129,13 @@ export default function App() {
<td>false</td>
<td>Auto focuses input on initial page load.</td>
</tr>
<tr>
<td>shouldRemoveWhiteSpaceOnPaste</td>
<td>boolean</td>
<td>false</td>
<td>false</td>
<td>Removes white spaces from pasted OTP characters.</td>
</tr>
</table>

### ⚠️ Warning
Expand All @@ -152,6 +159,8 @@ The v3 of `react-otp-input` is a complete rewrite of the library. Apart from mak

- A new prop called `inputType` has been added to the component. This prop can be used to specify the type of the input that will be passed to the input element being rendered. The default value of this prop is `number`.

- An new prop called `shouldRemoveWhiteSpaceOnPaste` has been added to the component. This prop can be used to disallow spaces as valid OTP characters. This is default set to `false`.

## Migrating from v1

`react-otp-input` is now a controlled component to facilitate functionalities that weren't possible before from the application using it, such as clearing or pre-assigning values. For `v1.0.0` and above, a `value` prop needs to be passed in the component for it to function as expected.
Expand Down
1 change: 1 addition & 0 deletions example/src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -116,6 +116,7 @@ function App() {
inputType={inputType}
renderInput={(props) => <input {...props} />}
shouldAutoFocus
shouldRemoveWhiteSpaceOnPaste
justrawat marked this conversation as resolved.
Show resolved Hide resolved
/>
</div>
<div className="btn-row">
Expand Down
12 changes: 10 additions & 2 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,8 @@ interface OTPInputProps {
inputStyle?: React.CSSProperties | string;
/** The type that will be passed to the input being rendered */
inputType?: AllowedInputTypes;
/** Boolean to not consider spaces as valid OTP values */
shouldRemoveWhiteSpaceOnPaste?: boolean;
}

const isStyleObject = (obj: unknown) => typeof obj === 'object' && obj !== null;
Expand All @@ -59,6 +61,7 @@ const OTPInput = ({
placeholder,
containerStyle,
inputStyle,
shouldRemoveWhiteSpaceOnPaste = false,
}: OTPInputProps) => {
const [activeInput, setActiveInput] = React.useState(0);
const inputRefs = React.useRef<Array<HTMLInputElement | null>>([]);
Expand Down Expand Up @@ -183,9 +186,14 @@ const OTPInput = ({
const otp = getOTPValue();
let nextActiveInput = activeInput;

let pastedString = event.clipboardData.getData('text/plain');

if (shouldRemoveWhiteSpaceOnPaste) {
pastedString = pastedString.replace(/\s/g, '');
}

// Get pastedData in an array of max size (num of inputs - current position)
const pastedData = event.clipboardData
.getData('text/plain')
const pastedData = pastedString
.slice(0, numInputs - activeInput)
.split('');
justrawat marked this conversation as resolved.
Show resolved Hide resolved

Expand Down