Welcome to use the rotating image verification code component. This component is written for React

Warehouse address: https://github.com/wangchuaichuai/react-image-verification-rotation

This component uses "clip-path" CSS properties, which may result in incompatibility with lower versions of IE browsers

If the overlay setting for compatible IE browsers is false, do not use this property

Develop the canvas version later on

At the same time, all relevant attributes of div can also be used

Welcome to raise questions for improvement

Parameter Introduction

interface ImageVerificationProps extends HTMLAttributes<HTMLDivElement> {
  src?: string
  offsetAngleTemp?: number
  onSuccess?: Function
  onFailer?: Function
  overlay?: boolean
  imgShow?: boolean
  width?: number
  height?: number
  imgWidth?: number
  deviationAngle?: number
  successText?: string
  failText?: string
  initText?: string
  CustomButton?: React.ReactNode
}

• The above are optional parameters

1. src is the address of the rotated image. If it is not passed in, use the image link I provided
2. offsetAngleTemp is the initial angle. You can provide the initial angle yourself or use the built-in random angle without passing in this parameter
3. onSuccess is a method that triggers when validation passes
4. onFailer is a method that triggers when validation fails
5. overlay overlay images to create small traps and large circles
6. imgShow is a boolean value that displays the original image when it is true, and not when it is false
7. width is the width of the component
8. height is the height of the component
9. imgWidth is the width and height of the image
10. deviationAngle is the deviation value of the verification angle, with a default deviation of 5 degrees
11. successText is the copy that has been successfully verified
12. failText is the copy that failed validation
13. initText is the prompt text
14. CustomButton allows you to customize the style of the reset button by defining an element and passing it in

Use

1. you can use

npm install image-verification-rotation

or

yarn add image-verification-rotation

2. This library uses the ES6 module export, so when used

import Verification from 'image-verification-rotation'

3. There is already a. dts declaration file in the file, so there is no need to import @ types/image verification annotation
4. use

<Verification  />
// or
  <App
    style={{ margin: '200px auto' }}
    imgWidth={400}
    height={400}
    width={400}
    overlay={true}
    imgShow={true}
  />

Example

1. imgShow = true

export default function Example() {
  const Btn: React.FC = () => {
    return <button>sadas</button>
  }
  return (
    <Verification
      style={{ margin: '200px auto' }}
      onSuccess={() => console.log('success')}
      onFailer={() => console.log('failer')}
      offsetAngleTemp={54}
      deviationAngle={10}
      CustomButton={<Btn />}
    />
  )
}

2. imgShow = false && overlay = true

export default function Example() {
  const Btn: React.FC = () => {
    return <button>sadas</button>
  }
  return (
    <Verification
      style={{ margin: '200px auto' }}
      onSuccess={() => console.log('success')}
      onFailer={() => console.log('failer')}
      offsetAngleTemp={54}
      imgShow={false}
      overlay={true}
      deviationAngle={10}
      CustomButton={<Btn />}
    />
  )
}

3. imgShow = true && overlay = true

export default function Example() {
  const Btn: React.FC = () => {
    return <button>sadas</button>
  }
  return (
    <Verification
      style={{ margin: '200px auto' }}
      onSuccess={() => console.log('success')}
      onFailer={() => console.log('failer')}
      offsetAngleTemp={54}
      imgShow={true}
      overlay={true}
      deviationAngle={10}
      CustomButton={<Btn />}
    />
  )
}