diff --git a/README.md b/README.md index ac4aeec..c45aa51 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,7 @@ mainstream web frameworks such as: React, Preact, Vue.js, Angular, Stencil.js, e * [Preact](#reactjs-and-preact) * [Angular 2+](#angular) * [Angular.JS](#angularjs) +* [Next.JS](#nextjs) * [Vanilla](#vanillajs) * You can find more examples in the `/examples/cdn` directory. @@ -177,6 +178,54 @@ mainstream web frameworks such as: React, Preact, Vue.js, Angular, Stencil.js, e ``` +### Next.JS + +> Example: display normal size hCaptcha with dark theme. + +1. Add `h-captcha` web component type by extending `JSX.IntrinsicElements` in `*.d.ts`. + ```ts + import * as React from 'react'; + + declare global { + declare namespace JSX { + interface IntrinsicElements { + 'h-captcha': React.DetailedHTMLProps & { + [k: string]: unknown; + }, HTMLElement>; + } + } + } + ``` + +2. Integrate in your next.js page. + ```js + export default function HomeComponent() { + const sitekey = '781559eb-513a-4bae-8d29-d4af340e3624'; + const captchaRef = createRef(); + + useEffect(() => { + import('@hcaptcha/vanilla-hcaptcha'); + + if (captchaRef.current) { + captchaRef.current.addEventListener('verified', (e: Event) => { + console.log('hCaptcha event: verified', { token: e.token }); + }); + } + }, []); + + return ( +
+ +
+ ); + } + ``` + ### Vanilla.JS > Example: display normal size hCaptcha accessible by keyboard (see [tabindex](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex)). diff --git a/packages/vanilla-hcaptcha/package.json b/packages/vanilla-hcaptcha/package.json index 40f6992..3b82275 100644 --- a/packages/vanilla-hcaptcha/package.json +++ b/packages/vanilla-hcaptcha/package.json @@ -56,6 +56,8 @@ "vue.js", "preact", "react", - "react.js" + "react.js", + "nextjs", + "next.js" ] }