JSPM – @eflag/aj-captcha-react@1.0.2

Package Exports

@eflag/aj-captcha-react
@eflag/aj-captcha-react/es/index.js
@eflag/aj-captcha-react/lib/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@eflag/aj-captcha-react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Captcha

AJ-Captcha React版 ,界面优化调整支持滑块和点选切换

alt slide.png

alt point.png

Getting Started

Install dependencies,

$ yarn add @eflag/aj-captcha-react

  // or
  
$ npm install @eflag/aj-captcha-react

API

属性	说明	类型	默认值
onFail	校验失败时的函数回调	Function	-
onSuccess	校验成功时的函数回调,会将二次校验参数作为参数传递	Function	-
type	显示校验模块的方式,可选 point(点选),slide(滑动)	String	auto
path	后端路径前缀	String	-

hooks

useCaptcha

import React, { useRef } from 'react';
import { useCaptcha } from '@eflag/aj-captcha-react';

export default () => {
  const [run] = useCaptcha({ path: 'http://foo.com', type: 'auto' });

  const click = async () => {
    const data = await run()
    console.log(data)
  };

  return (<button onClick={click}>verify</button>);
}

Demo

import React, { useRef } from 'react';
import { Captcha } from '@eflag/aj-captcha-react';

export default () => {
  const ref = useRef();

  const click = () => {
    ref.current?.verify();
  };

  return (
    <Captcha
      onSuccess={(data) => console.log(data)}
      path='https://api.xxx.com'
      type='auto'
      ref={ref}
    >
      <button
        onClick={click}
        style={{
          border: 'none',
          color: '#fff',
          width: '100px',
          height: '50px',
          lineHeight: '50p',
          background: '#1890ff',
        }}
      >
        点击
      </button>
    </Captcha>
  );
}