@funpodium/fp-captcha-client-react-sdk v0.11.20

fpCaptcha Client React SDK

🚧 This is still a WIP project, do not use this in production. 🚧

install

1. Follow this guide to retrieve a GitLab personal access token.
2. Run these lines in shell to add the config to npm.

$ npm config set @funpodium:registry https://gitlab.com/api/v4/packages/npm/
$ npm config set -- '//gitlab.com/api/v4/packages/npm/:_authToken' "<your_personal_access_token>"

3. Run one of these lines to add it to the project's package.json.

npm install @funpodium/fp-captcha-client-react-sdk
# or use yarn
yarn add @funpodium/fp-captcha-client-react-sdk

usage

<FpCaptcha />

all-in-one React component that encapsulate the logic in a nice package.

import { FpCaptcha } from "@funpodium/fp-captcha-client-react-sdk";

const App: React.FC = () => {
  const [visible, useVisible] = useState(false);
  const [challengeUuid, setChallengeUuid] = useState("");

  const startNewChallenge = () => {
    //TODO: get challengeId
  };

  const handlePassed = () => {
    //TODO: after pass
  };

  useEffect(() => {
    startNewChallenge();
  }, []);

  return (
    <FpCaptcha
      visible={visible}
      challengeId={challengeUuid}
      options={{
        window: global.window,
        dialogMode: true,
        config: {
          apiUrl: CAPTCHA_SERVICE_API_URL,
          applicationLocale: "zh",
          chunkSize: 10,
          dragThreshold: 20,
        },
      }}
      onClose={() => setVisible(false)}
      onPassed={handlePassed}
    />
  );
};

FpCaptcha Features

FpCaptcha-options

FpCaptcha-options-config

useFpCaptcha hook

a React hook that handles the dirty work for you while it allows you to trigger methods on your command.

import { useFpCaptcha } from "@funpodium/fp-captcha-client-react-sdk";

const App: React.FC = () => {
  const canvasRef = useRef();
  const { build, refresh, result, fpCaptcha } = useFpCaptcha(canvasRef);

  useEffect(() => {
    build();
  }, [build]);

  return <canvas ref={canvasRef} />;
};

useFpCaptcha-Return type

Type

JudgementType

{
  challengeUuid: string;
  code: number;
  message: string;
  isPassed: boolean;
}

LocaleType

{
  fail: string;
  abnormal: string;
  provide: string;
  success: string;
  refresh: string;
  description: string;
  info: string;
}