hCaptcha Component Library for Solid.


Solid hCaptcha Component Library

This is a port of @hcaptcha/react-hcaptcha for Solid.


hCaptcha is a drop-replacement for reCAPTCHA that protects user privacy, rewards websites, and helps companies get their data labeled.

Sign up at hCaptcha to get your sitekey today. You need a sitekey to use this library.


You can install this library via your favorite package manager.

npm install solid-hcaptcha --save

# Yarn
yarn add solid-hcaptcha

# PNPm
pnpm add solid-hcaptcha


You can see multiple use cases on the example website.

Basic Usage

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 (
      onVerify={token => console.log(token)}

export default App;

Programmatic Usage

import type {
} 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;

  const submitCaptcha = async () => {
    if (!hcaptcha) return; // Check if the widget has loaded.

    // Execute the captcha and get the response.
    const response = await hcaptcha.execute();

    console.log("stored response", response);

  return (
        onLoad={hcaptcha_instance => (hcaptcha = hcaptcha_instance)}

      <button onClick={submitCaptcha}>
        Open captcha

export default App;



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 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.
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.
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) users: select "Passive" or "99.9% Passive" modes to get this No-CAPTCHA behavior.

Development (for /package)

git clone https://github.com/Vexcited/solid-hcaptcha

I use pnpm as the package manager, so run pnpm install to install the dependencies.


  • pnpm build: Lints and builds to the dist folder.
  • pnpm lint: Checks if there's any TypeScript error.
  • pnpm release: Runs release-it to release new versions.

Example Website

You can see how to contribute to the example website in the example folder.

You might also like...

A ~2kb hotkeys library for solid that adds only 2 event listeners.

A ~2kb hotkeys library for solid that adds only 2 event listeners.

Solid Hotkeys - Cmd+S+H Solid Hotkeys is the easiest way to add hotkeys to your application. Built for and with Solid. Motivation You gotta have hotke

Aug 1, 2022

Generate meshes from signed distance functions and constructive solid geometry operations.

Generate meshes from signed distance functions and constructive solid geometry operations.

sdf-csg Generate meshes from signed distance functions and constructive solid geometry operations. This library is heavily based upon Inigo Quilez's 3

Oct 24, 2022

solid material ui port (ported from blazor port)

solid-material-ui solid material ui port (porting from blazor port) In preparation for solid hack Turbo Mono-repository is used for component package

Apr 30, 2022

Solid hooks for Firebase v9.

solid-firebase Solid hooks for Firebase. Quick start Install it: yarn add firebase solid-firebase Configure firebase app: import { render } from 'soli

Dec 23, 2022

[WIP] A solid directive for adding colorful shadows to images.

solid-cosha A solid directive for adding colorful shadows to images (based on cosha). Quick start Install it: yarn add solid-cosha Use it: import { co

Feb 3, 2022

Add cmd+k interface to your solid site

solid-ninja-keys Add cmd+k interface to your solid site. Built on top of ninja-keys. Quick start Install it: yarn add solid-ninja-keys Use it: import

Dec 19, 2022

A helper to use immer as Solid.js Signal to drive state

Solid Immer A helper to use immer as Solid.js Signal to drive state. Installation $ npm install solid-immer Usage Use createImmerSignal to create a im

Nov 22, 2022

Simple Solid primitive unit test utility.

solid-primitive-test-util Simple Solid primitive unit test utility. Install pnpm add solid-primitive-test-util -D Example Basic Usage Let's say we hav

Mar 21, 2022

Adds full-text search to Community Solid Server. Powered by atomic-server

Solid Search for Community Solid Server This is an extension / plugin for the Community Solid Server. It adds full-text search to the Community Solid

Jun 6, 2022
French student, who loves everything about web development.
A SolidJS starter template with solid-labels, solid-sfc and solid-styled

solid-sfc-styled-labels-starter This is a SolidJS starter template for easily setting up solid-sfc, solid-styled and solid-labels. Development Install

Alexis H. Munsayac 9 Mar 25, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
Solid component and library for LiveKit (unofficial)

This package provides Solid components that makes it easier to use LiveKit in a Solid app. Inspired completely by https://github.com/livekit/livekit-r

Prince Neil Cedrick Castro 6 Mar 8, 2022
UI component library for Solid.js with SSR support

Dolmen Dolmen is a themeable UI component library designed to work with Solid.js and optimized for SSR (Server-side rendering). It provides a broad se

Talin 14 Dec 17, 2022
🔥 Set up your new Solid component library in seconds!

Create Solid Library Create SolidJS libraries with ease! Usage npx create-solid-library <name> Development Developing components is often a visual pro

blusk 6 Oct 28, 2022
👇 Bread n butter utility for component-tied mouse/touch gestures in Solid.

solid-gesture solid-gesture is a port of @use-gesture/react which lets you bind richer mouse and touch events to any component or view. With the data

Robert Soriano 8 Sep 30, 2022
Simple and minimal split pane component for Solid!

solid-split-pane Split pane component for Solid! Uses Split.Js under the hood. Takes all props that split.js takes, plus a gutterClass. (Q) Why not so

blusk 5 Oct 28, 2022
Solid.js library adding a services layer for global shared state.

Solid Services Services are "global" objects useful for features that require shared state or persistent connections. Example uses of services might i

Maciej Kwaśniak 55 Dec 30, 2022