react-verification-code-virtual-keyboard

Based on antd-mobile Modal, InputItem. Use css border-image instead of border. Developed a four-digit verification code input box with virtual keyboard and pasting functions.

Install

yarn

yarn add react-verification-code-virtual-keyboard

npm

npm install --save react-verification-code-virtual-keyboard

UMD

<script src="https://unpkg.com/[email protected]/dist/react-verification-code-virtual-keyboard.umd.js"></script>

Tips: You can find the library on window.ReactVerificationCodeVirtualKeyboard.

Import

ES2015

import ReactVerificationCodeVirtualKeyboard from 'react-verification-code-virtual-keyboard'

CommonJS

const ReactVerificationCodeVirtualKeyboard = require('react-verification-code-virtual-keyboard')

Usage

import ReactVerificationCodeVirtualKeyboard from 'react-verification-code-virtual-keyboard'

function Example() {
  return (
    <ReactVerificationCodeVirtualKeyboard
      visible={true}
      onClose={() => {}}
      maskClosable={true}
      headerLeftContent={[<b key="X">X</b>]}
      headerTitle="验证码标题"
      headerRightContent={[]}
      tipMessage="验证码提示信息"
      onInputChange={() => {}}
      isCodeImmediatelySendVerify={true}
      onSendVerifyCode={() => {}}
    >
      {/** List only children or Null */}
    </ReactVerificationCodeVirtualKeyboard>
  )
}

Params

| Property | Description | Type | Default | isRequired | | --------------------------- | -------------------------------------------------------------------------------------------------------------- | --------------------- | --------- | ---------- | | visible | Show Modal Verification Code UI | boolean | false | true | | onClose | Close Modal Verification Code UI (Default clear countdown) | function | undefined | true | | maskClosable | Whether the mask layer of modal is clickable | boolean | true | false | | headerLeftContent | Left half of head | JSX.Element[] | [] | false | | headerTitle | title | JSX.Element | string | | '请输入验证码' | false | | headerRightContent | Right half of head | JSX.Element[] | [] | false | | tipMessage | Tips | JSX.Element | string | '验证码' | false | | onInputChange | Input Box handle change value | function | undefined | false | | isCodeImmediatelySendVerify | Whether to send the verification code immediately when the modal pops up | boolean | false | false | | onSendVerifyCode | If the isCodeImmediatelySendVerify value is true, auto excute onSendVerifyCode. 点击获取验证码，将执行此函数。 | function | undefined | true |

LICENSE

GPL v3 License