import { Meta, Story, Canvas } from '@storybook/addon-docs';
import { UseFpCaptchaComponent } from "./UseFpCaptcha.component";

<Meta title='useFpCaptcha' />

# useFpCaptcha

<Canvas>
  <Story name='Basic'>
    <UseFpCaptchaComponent />
  </Story>
</Canvas>

## Code sample

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

const { build, refresh, locale, judgement, fpCaptcha } = useFpCaptcha(canvasRef, options)
```

## Arguments

### canvasRef

A React.Ref pointing at the canvas element.

```ts
const canvasRef = useRef<HTMLCanvasElement>()
```

### options

Set hook options, see all available options below.

```json5
{
  "config": { /*...*/ }
}
```

#### config

```ts
type FpCaptchaConfig = {
  apiUrl: string; // set the url for fpCaptcha API endpoint
  chunkSize: number; // set the decipher chunk size ⚠️
  dragThreshold: number; // set the drag area threshold ⚠️
}
```

## Returned

### build

> `(challengeId: string) => void`

### refresh

> `(challengeId: string) => void`

### judgement

> `FpCaptchaJudgement`

### locale

> `Partial<FpCaptchaLocaleDictionary>`

### fpCaptcha

> `FpCaptcha`
