solid-hcaptcha - npm Package Compare versions

Comparing version 0.2.2 to 0.2.3

dist/source/hcaptcha.jsx

@@ -0,0 +0,0 @@ import { createScriptLoader } from "@solid-primitives/script-loader";

dist/source/index.jsx

 import HCaptcha from "./hcaptcha";
 export default HCaptcha;

dist/source/types.js

 export {};

dist/source/utils.js

@@ -0,0 +0,0 @@ export const generateScriptUrl = (params, onLoadFunctionName, apihost) => {

dist/types/hcaptcha.d.ts

@@ -0,0 +0,0 @@ import type { Component } from "solid-js";

dist/types/index.d.ts

 import HCaptcha from "./hcaptcha";
 export type { HCaptchaExecuteResponse, HCaptchaFunctions, HCaptchaConfig, HCaptchaProps } from "./types";
 export default HCaptcha;

dist/types/types.d.ts

@@ -94,4 +94,7 @@ /// <reference types="@hcaptcha/types" />
 export interface HCaptchaFunctions {
+    /** Reset the current challenge. */
     resetCaptcha(): void;
+    /** Manually render the hCaptcha widget. */
     renderCaptcha(onReady?: () => unknown): void;
+    /** Manually remove the hCaptcha widget from the DOM. */
     removeCaptcha(callback: () => unknown): void;
@@ -108,2 +111,3 @@ /**
     getResponse(): string | null;
+    /** See enterprise docs. */
     setData(data: ConfigSetData): void;
@@ -110,0 +114,0 @@ /** Run `execute` on the captcha, without returning the response. */

dist/types/utils.d.ts

 export interface HCaptchaUrlParams {
     [key: string]: string | boolean | number | undefined | null;
 }
-export declare const generateScriptUrl: (params: HCaptchaUrlParams, onLoadFunctionName: string, apihost?: string | undefined) => string;
+export declare const generateScriptUrl: (params: HCaptchaUrlParams, onLoadFunctionName: string, apihost?: string) => string;

package.json

 {
   "name": "solid-hcaptcha",
-  "description": "Unofficial port of react-hcaptcha for Solid.",
-  "version": "0.2.2",
+  "description": "hCaptcha Component Library for Solid.",
+  "version": "0.2.3",
   "license": "MIT",
@@ -36,3 +36,2 @@ "source": "./src/index.tsx",
   "devDependencies": {
-    "@hcaptcha/types": "^1.0.1",
     "@typescript-eslint/eslint-plugin": "^5.26.0",
@@ -52,4 +51,5 @@ "@typescript-eslint/parser": "^5.26.0",
   "dependencies": {
+    "@hcaptcha/types": "^1.0.2",
     "@solid-primitives/script-loader": "^1.1.0"
   }
 }

README.md

 # Solid hCaptcha Component Library
 
-> This is an unofficial port of [`@hcaptcha/react-hcaptcha`](https://github.com/hCaptcha/react-hcaptcha) for [Solid](https://www.solidjs.com).
+> This is a port of [`@hcaptcha/react-hcaptcha`](https://github.com/hCaptcha/react-hcaptcha) for [Solid](https://www.solidjs.com).
 
@@ -34,5 +34,10 @@ ## Description
 ```tsx
+import type { HCaptchaExecuteResponse } from "solid-hcaptcha";
 import HCaptcha from "solid-hcaptcha";
 
 const App: Component = () => {
+  const handleVerify = (token: string, eKey: string) => {
+    console.log(token, eKey);
+  };
+
   return (
@@ -52,6 +57,12 @@ <HCaptcha
 ```tsx
-import type { HCaptchaFunctions } from "solid-hcaptcha";
+import type {
+  HCaptchaFunctions,
+  HCaptchaExecuteResponse
+} from "solid-hcaptcha";
+
 import HCaptcha from "solid-hcaptcha";
+import { createSignal } from "solid-js";
 
 const App: Component = () => {
+  const [captchaResponse, setCaptchaResponse] = createSignal<HCaptchaExecuteResponse | null>(null);
   let hcaptcha: HCaptchaFunctions | undefined;
@@ -64,5 +75,7 @@
     const response = await hcaptcha.execute();
-    console.log(response);
-  }
 
+    setCaptchaResponse(response);
+    console.log("stored response", response);
+  };
+
   return (
@@ -86,4 +99,62 @@ <div>
 
-<!-- ## API -->
+## API
 
+### Props
+
+| Name | Values/Type | Required | Default | Description |
+| ---- | ----------- | -------- | ------- | ----------- |
+| `sitekey` | `string` | **Yes** | `-` | This is your sitekey, this allows you to load captcha. If you need a sitekey, please visit hCaptcha, and sign up to get your sitekey. |
+| `size` | `"normal" | "compact" | "invisible"` | No | `"normal"` | This specifies the "size" of the component. hCaptcha allows you to decide how big the component will appear on render, this always defaults to normal. |
+| `theme` | `"light" | "dark"` | No | `"light"` | hCaptcha supports both a light and dark theme. If no theme is inherently set, the captcha will always default to light. |
+| `tabindex` | `number` | No | `0` | Set the tabindex of the widget and popup. When appropriate, this can make navigation of your site more intuitive. |
+| `id` | `string` | No | `-` | Set an ID to the hCaptcha widget. Make sure each hCaptcha component generated on a single page has its own unique ID when using this prop. |
+| `config` | [`HCaptchaConfig`](#advanced-configuration) | No | `{}` | Advanced configuration for the hCaptcha component. |
+
+### Advanced Configuration
+
+All the parameters are optional.
+
+| Name | Values/Type | Default | Description |
+| ---- | ----------- | ------- | ----------- |
+| `recaptchacompat` | `boolean` | `true` | Disable drop-in replacement for reCAPTCHA with `false` to prevent hCaptcha from injecting into `window.grecaptcha`. |
+| `hl` | `string` (ISO 639-2 code) | `auto` | hCaptcha auto-detects language via the user's browser. This overrides that to set a default UI language. See [language codes](https://hcaptcha.com/docs/languages). |
+|
+| `apihost` | `string` | `-` | See enterprise docs. |
+| `assethost` | `string` | `-` | See enterprise docs. |
+| `endpoint` | `string` | `-` | See enterprise docs. |
+| `host` | `string` | `-` | See enterprise docs. |
+| `imghost` | `string` | `-` | See enterprise docs. |
+| `reportapi` | `string` | `-` | See enterprise docs. |
+| `sentry` | `string` | `-` | See enterprise docs. |
+| `custom` | `boolean` |`-` | See enterprise docs. |
+
+### Events Props
+
+| Event | Params | Description |
+| ----- | ------ | ----------- |
+| `onError` | `error: HCaptchaError` | When an error occurs. Component will reset immediately after an error. |
+| `onVerify` | `token: string, eKey: string` | When challenge is completed. The response `token` and an `eKey` (session ID) are passed along. |
+| `onExpire` | `-` | When the current token expires. |
+| `onLoad` | `hcaptcha: HCaptchaFunctions` | When the hCaptcha API loads. The hCaptcha instance is passed along. You can store them to use, later, [its methods](#methods-from-hcaptcha-instance-type-hcaptchafunctions). |
+| `onOpen` | `-` | When the user display of a challenge starts. |
+| `onClose` | `-` | When the user dismisses a challenge. |
+| `onChallengeExpired` | `-` | When the user display of a challenge times out with no answer. |
+
+### Methods from hCaptcha instance (type `HCaptchaFunctions`)
+
+| Method | Description |
+| ------ | ----------- |
+| `execute()` | Programmatically trigger a challenge request. Additionally, this method is run asynchronously and returns a promise with the `token` and `eKey` when the challenge is completed. |
+| `executeSync()` | Programmatically trigger a challenge request but doesn't return the captcha response. |
+| `getRespKey()` | Get the current challenge reference ID. |
+| `getResponse()` | Get the current challenge response token from completed challenge. |
+| `renderCaptcha(onReady?: () => unknown)` | Manually render the hCaptcha widget. |
+| `removeCaptcha(callback?: () => unknown)` | Manually remove the hCaptcha widget from the DOM. |
+| `resetCaptcha()` | Reset the current challenge. |
+| `setData()` | See enterprise docs. |
+
+**NOTE**: Make sure to reset the hCaptcha state when you submit your form by calling the method `.resetCaptcha` on your hCaptcha Solid Component ! Passcodes are one-time use, so if your user submits the same passcode twice then it will be rejected by the server the second time.
+
+Please note that "invisible" simply means that no hCaptcha button will be rendered. Whether a challenge shows up will depend on the sitekey difficulty level. Note to hCaptcha Enterprise ([BotStop](https://www.botstop.com)) users: select "Passive" or "99.9% Passive" modes to get this No-CAPTCHA behavior.
+
 ## Development
@@ -90,0 +161,0 @@

No alert changes

Improved metrics

Total package byte prevSize

46757

10.31%

Dev dependency count

9

-10%

Lines of code

638

0.63%

Number of lines in readme file

170

71.72%

Worsened metrics

Dependency count

3

50%

Dependency changes

• + Added

  @hcaptcha/types@^1.0.2

• + Added

  @hcaptcha/types@1.2.0
  (transitive)