Go Captcha React Package

⭐️ 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

🖖 Click Mode Captcha

1import GoCaptcha from 'go-captcha-react';
2
3<GoCaptcha.Click
4  config={{}}
5  data={{}}
6  events={{}}
7/>

Parameter Reference

1// config = {}
2interface ClickConfig {
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 ClickData {
18  image: string;
19  thumb: string;
20}
21
22// events = {}
23interface ClickEvents {
24  click?: (x: number, y: number) => void;
25  refresh?: () => void;
26  close?: () => void;
27  confirm?: (dots: Array<ClickDot>, reset: ()=>void) => void;
28}
29
30// component method
31interface ImperativeHandle {
32  reset: () => void,
33  clear: () => void,
34  refresh: () => void,
35  close: () => void,
36}

🖖 Slide Mode Captcha

1import GoCaptcha from 'go-captcha-react';
2
3<GoCaptcha.Slide
4  config={{}}
5  data={{}}
6  events={{}}
7/>
8
9<GoCaptcha.SlideRegion
10  config={{}}
11  data={{}}
12  events={{}}
13/>

Parameter Reference

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}
12
13// data = {}
14interface SlideData {
15  thumbX: number;
16  thumbY: number;
17  thumbWidth: number;
18  thumbHeight: number;
19  image: string;
20  thumb: string;
21}
22
23// events = {}
24interface SlideEvents {
25  move?: (x: number, y: number) => void;
26  refresh?: () => void;
27  close?: () => void;
28  confirm?: (point: SlidePoint, reset: ()=>void) => void;
29}
30
31// component method
32interface ImperativeHandle {
33  reset: () => void,
34  clear: () => void,
35  refresh: () => void,
36  close: () => void,
37}

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) => void;
31}
32
33// component method
34interface ImperativeHandle {
35  reset: () => void,
36  clear: () => void,
37  refresh: () => void,
38  close: () => void,
39}

🖖 Rotate Mode Captcha

1import GoCaptcha from 'go-captcha-react';
2
3<GoCaptcha.Rotate
4  config={{}}
5  data={{}}
6  events={{}}
7/>

Parameter Reference

1// config = {}
2interface RotateConfig {
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 RotateData {
17  angle: number;
18  image: string;
19  thumb: string;
20}
21
22// events = {}
23interface RotateEvents {
24  rotate?: (angle: number) => void;
25  refresh?: () => void;
26  close?: () => void;
27  confirm?: (angle: number, reset: ()=>void) => void;
28}
29
30// component method
31interface ImperativeHandle {
32  reset: () => void,
33  clear: () => void,
34  refresh: () => void,
35  close: () => void,
36}

🖖 Button

1import GoCaptcha from 'go-captcha-react';
2
3<GoCaptcha.Button />

Parameter Reference

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

👍 Sponsor