English | 中文

⭐️ If it helps you, please give a star.

Install

1yarn add go-captcha-react
2# or
3npm install go-captcha-react
4# or
5pnpm install go-captcha-react

1import GoCaptcha from 'go-captcha-react';

Click Mode

1<GoCaptcha.Click
2  config={{}}
3  data={{}}
4  events={{}}
5  ref={domRef}
6/>
7<script>
8  // call methods
9  const domRef = useRef(null)
10  domRef.clear()
11  domRef.refresh()
12</script>

1// config = {}
2interface Config {
3  width?: number;
4  height?: number;
5  thumbWidth?: number;
6  thumbHeight?: number;
7  verticalPadding?: number;
8  horizontalPadding?: number;
9  showTheme?: boolean;
10  title?: string;
11  buttonText?: string;
12  iconSize?: number;
13  dotSize?: number;
14}
15
16// data = {}
17interface Data {
18  image: string;
19  thumb: string;
20}
21
22// events = {}
23interface Events {
24  click?: (x: number, y: number) => void;
25  refresh?: () => void;
26  close?: () => void;
27  confirm?: (dots: Array<ClickDot>, reset:() => void) => boolean;
28}
29
30// component method
31interface ClickMethods {
32  reset: () => void,
33  clear: () => void,
34  refresh: () => void,
35  close: () => void,
36}
37
38// export component method
39interface ExportMethods {
40  reset: () => void,
41  clear: () => void,
42  refresh: () => void,
43  close: () => void,
44}

Slide Mode

1<GoCaptcha.Slide
2  config={{}}
3  data={{}}
4  events={{}}
5  ref={domRef}
6/>
7<script>
8  // call methods
9  const domRef = useRef(null)
10  domRef.clear()
11  domRef.refresh()
12</script>

1// config = {}
2interface SlideConfig {
3  width?: number;
4  height?: number;
5  thumbWidth?: number;
6  thumbHeight?: number;
7  verticalPadding?: number;
8  horizontalPadding?: number;
9  showTheme?: boolean;
10  title?: string;
11  iconSize?: number;
12  scope ?: boolean;
13}
14
15// data = {}
16interface SlideData {
17  thumbX: number;
18  thumbY: number;
19  thumbWidth: number;
20  thumbHeight: number;
21  image: string;
22  thumb: string;
23}
24
25// events = {}
26interface SlideEvents {
27  move?: (x: number, y: number) => void;
28  refresh?: () => void;
29  close?: () => void;
30  confirm?: (point: SlidePoint, reset:() => void) => boolean;
31}
32
33// export component method
34interface ExportMethods {
35  reset: () => void,
36  clear: () => void,
37  refresh: () => void,
38  close: () => void,
39}

Drag-And-Drop Mode

1<GoCaptcha.SlideRegion
2  config={{}}
3  data={{}}
4  events={{}}
5  ref={domRef}
6/>
7<script>
8  // call methods
9  const domRef = useRef(null)
10  domRef.clear()
11  domRef.refresh()
12</script>

1// config = {}
2interface SlideRegionConfig {
3  width?: number;
4  height?: number;
5  thumbWidth?: number;
6  thumbHeight?: number;
7  verticalPadding?: number;
8  horizontalPadding?: number;
9  showTheme?: boolean;
10  title?: string;
11  iconSize?: number;
12  scope ?: boolean;
13}
14
15// data = {}
16interface SlideRegionData {
17  thumbX: number;
18  thumbY: number;
19  thumbWidth: number;
20  thumbHeight: number;
21  image: string;
22  thumb: string;
23}
24
25// events = {}
26interface SlideRegionEvents {
27  move?: (x: number, y: number) => void;
28  refresh?: () => void;
29  close?: () => void;
30  confirm?: (point: SlideRegionPoint, reset:() => void) => boolean;
31}
32
33// export component method
34interface ExportMethods {
35  reset: () => void,
36  clear: () => void,
37  refresh: () => void,
38  close: () => void,
39}

Rotation Mode

1<GoCaptcha.Rotate
2  config={{}}
3  data={{}}
4  events={{}}
5  ref={domRef}
6/>
7<script>
8  // call methods
9  const domRef = useRef(null)
10  domRef.clear()
11  domRef.refresh()
12</script>

1// config = {}
2interface Config {
3  width?: number;
4  height?: number;
5  thumbWidth?: number;
6  thumbHeight?: number;
7  verticalPadding?: number;
8  horizontalPadding?: number;
9  showTheme?: boolean;
10  title?: string;
11  iconSize?: number;
12  scope ?: boolean;
13}
14
15// data = {}
16interface Data {
17  angle: number;
18  image: string;
19  thumb: string;
20  thumbSize: number;
21}
22
23// events = {}
24interface Events {
25  rotate?: (angle: number) => void;
26  refresh?: () => void;
27  close?: () => void;
28  confirm?: (angle: number, reset:() => void) => boolean;
29}
30
31// export component method
32interface ExportMethods {
33  reset: () => void,
34  clear: () => void,
35  refresh: () => void,
36  close: () => void,
37}

Button

1<GoCaptcha.Button />

1interface _ {
2  config?: CaptchaConfig;
3  clickEvent?: () => void;
4  disabled?: boolean;
5  type?: "default" | "warn" | "error" | "success";
6  title?: string;
7}
8
9export interface CaptchaConfig {
10  width?: number;
11  height?: number;
12  verticalPadding?: number;
13  horizontalPadding?: number;
14}
15