# fpCaptcha Client React SDK

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

## install

1. Follow [this guide](https://docs.gitlab.com/ee/user/profile/personal_access_tokens.html) to retrieve a GitLab personal access token.
2. Run these lines in shell to add the config to npm.
```shell
$ 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`.
```shell
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.

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

const App: React.FC = () => {
    return (
        <FpCaptcha />
    );
};
```

### `useFpCaptcha` hook

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

```tsx
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} />
    );
}
```
