Migrating to Version 2

This guide is aimed at developers wanting to update from v0.1.x to v2.x.x.

Check the following steps one by one and execute the ones that apply to your situation.

Rename prop: input

The input prop has been renamed to inputProps in order to be more explicit about the props being forwarded to the input element. Also, the onChange callback is now available on the top level. This matches the interface of a regular input element more closely (there is also a new top-level prop value).

// v0.1.x
<VerificationInput
  input={{
    type: "tel",
    value={code}
    onChange={handleCodeChange}
  }}
/>
 
// v2
<VerificationInput
  inputProps={{
    type: "tel",
  }}
  value={code}
  onChange={handleCodeChange}
/>

Remove props: container, inputField, characters, character

These props have been removed. Your custom CSS classes can be passed to the new classNames prop. In order to simplify the component structure, the characters element has been removed, use container instead. For more details see Styling. Additional props can no longer be forwarded to these elements.

// v0.1.x
<VerificationInput
  container={{
    className: 'container',
  }}
  characters={{
    className: 'characters',
  }}
  character={{
    className: 'character',
  }}
/>
 
// v2
<VerificationInput
  classNames={{
    container: "container",
    character: "character",
  }}
/>

Remove prop: getInputRef

This callback has been removed. The new way to receive the input ref is to use the standard ref prop (opens in a new tab). The result will be a ref to the actual (invisible) input element.

// v0.1.x
<VerificationInput
  getInputRef={ref => {myRef = ref}}
/>
 
// v2
<VerificationInput
  ref={myRef}
/>