// with npm
npm install --save react-pin-input-hook
// with yarn
yarn add react-pin-input-hook
Usage example
Uncontrolled
import * as React from 'react'
import { usePinInput } from 'react-pin-input-hook'
function Component() {
const { fields } = usePinInput({
onComplete: (value) => {
// Here you can make asynchronous requests to your API for verification.
console.log(value)
},
})
return (
<div className='pin-input'>
{fields.map((fieldProps, index) => (
<input key={index} className='pin-input__field' {...fieldProps} />
))}
</div>
)
}
Sets the initial values of the fields. Removes focus by default. The parameter can be passed { focus: true } to set the focus on the first field.
PinInputFieldProps
Prop
Type
Descriptions
ref
React.RefCallback
Returns a callback function to register the field.
value
string
Returns the value of the field.
disabled
boolean
Returns the value passed by the disabled parameter.
autoComplete
'one-time-code' or 'off'
Returns either one-time-code if the parameter otp: true was passed, otherwise off.
inputMode
'text' or 'numeric'
Returns either text if the parameter type: 'alphanumeric' was passed, otherwise numeric.
type
'text' or 'password'
Returns either password if the mask: true parameter was passed, or text.
placeholder
string
Returns the value passed by the placeholder parameter if there are no focused fields.
onBlur
(event: React.FocusEvent) => void
Returns the handler for the focus loss event if disabled: false.
onFocus
(event: React.FocusEvent) => void
Returns the handler for the focus appearance event if disabled: false.
onChange
(event: React.ChangeEvent) => void
Returns a handler for the field change event if disabled: false.
onKeyDown
(event: React.KeyboardEvent) => void
Returns a handler for the keystroke event if disabled: false.
PinInputActions
Name
Type
Description
blur
() => void
Imperative function call to lose focus.
focus
(index?: number) => void
Imperative function call to set focus on the first empty field. In the case when error: true, the focus is set to the first empty field. The argument takes an optional parameter in the form of a number (ordinal index), which will set the focus on a specific field.
Example
import * as React from 'react'
import { usePinInput, PinInputActions } from 'react-pin-input-hook'
function Component() {
const [values, setValues] = React.useState(['', '', '', '', '', ''])
const [error, setError] = React.useState(false)
const actionRef = React.useRef<PinInputActions>(null)
const { fields } = usePinInput({
values,
onChange: setValues,
error,
actionRef,
})
const onSubmit = () => {
// Check if there is at least one empty field. If there is,
// the input is considered empty.
if (values.includes('')) {
// Setting the error.
setError(true)
// We set the focus on the first empty field if `error: true`
// was passed as a parameter in `options`.
actionRef.current?.focus()
}
}
return (
<form>
<div className='pin-input'>
{fields.map((fieldProps, index) => (
<input key={index} className='pin-input__field' {...fieldProps} />
))}
</div>
<button onClick={onSubmit}>Submit</button>
</form>
)
}