Docplanner Mobile UI

⚙️ – Core

🧬 – Organisms

OneTimeCodeInput

This input has everything you need to handle a scenario where you need a confirmation code from a text message. It autosubmits the input once you fill in all the fields so no need for a submit button. It also shows one time code suggestion on iOS which means that completing the input takes just one click.

Properties

codeLength

number | undefined

Number of digits

onFilled

(value: string) => void

required

Callback fired when the last digit is filled

disabled

boolean | undefined

Determines whether the input is opaque

Ref methods

In order to make its functionality complete, it offers two methods attached to its ref attribute.

clear
focus

They are especially useful for error handling. See an example below for more information.

Basic usage

() => {
  const OneTimeCodeInputDemo = () => {
    const [isLoading, setIsLoading] = useState(false)
    const oneTimeCodeInputRef = useRef(null)
    const mockRequest = () =>
      new Promise((resolve, reject) => {
        return setTimeout(() => {
          reject()
        }, 1000)
      })
    const makeRequest = () => {
      setIsLoading(true)
      mockRequest().catch(() => {
        setIsLoading(false)
        oneTimeCodeInputRef.current.clear()
        oneTimeCodeInputRef.current.focus()
      })
    }
    return (
      <OneTimeCodeInput
        disabled={isLoading}
        onFilled={makeRequest}
        ref={oneTimeCodeInputRef}
      />
    )
  }
  return <OneTimeCodeInputDemo />
}

() => {
  const OneTimeCodeInputDemo = () => {
    const [isLoading, setIsLoading] = useState(false)
    const oneTimeCodeInputRef = useRef(null)
    const mockRequest = () =>
      new Promise((resolve, reject) => {
        return setTimeout(() => {
          reject()
        }, 1000)
      })
    const makeRequest = () => {
      setIsLoading(true)
      mockRequest().catch(() => {
        setIsLoading(false)
        oneTimeCodeInputRef.current.clear()
        oneTimeCodeInputRef.current.focus()
      })
    }
    return (
      <OneTimeCodeInput
        disabled={isLoading}
        onFilled={makeRequest}
        ref={oneTimeCodeInputRef}
      />
    )
  }
  return <OneTimeCodeInputDemo />
}

Docplanner Mobile UI

OneTimeCodeInput

.css-1r0pe6c{color:inherit;-webkit-text-decoration:none;text-decoration:none;}.css-1r0pe6c:hover{-webkit-text-decoration:underline;text-decoration:underline;}Properties

Ref methods

Basic usage

Properties