pittica/gatsby-plugin-recaptcha

Description

ReCaptcha component for GatsbyJS.

This plugin has been developed using GatsbyJS tutorials.

Install

npm install @pittica/gatsby-plugin-recaptcha

Usage

Import the component classes.

import ReCaptcha from "@pittica/gatsby-plugin-recaptcha"

Use the component in React functions.

import React, { useState } from "react"

export default function ContactPage() {
  const [submitted, setSubmitted] = useState(false)

  const submit = (token) => {}

  return (
    <div>
      <ReCaptcha
        action="homepage"
        siteKey="RECAPTCHA_PUBLIC_KEY"
        onVerify={(token) => submit(token)}
        submitted={submitted}
      />
      <button onClick={() => setSubmitted(true)}>Submit</button>
    </div>
  )
}

Attributes

The components has some attributes.

siteKey

• Type: string
• Required: yes

ReCaptcha public key.

action

• Type: string
• Required: yes
• Default value: homepage

ReCaptcha action. Common values are homepage or login.

id

• Type: string
• Required: no

HTML ID for multiple ReCaptcha elements.

badge

• Type: string
• Required: no
• Values: bottomright, bottomleft, inline
• Default value: inline

Badge position and aspect.

size

• Type: string
• Required: no
• Values: compact, normal, invisible
• Default value: invisible

Badge size.

callback

• Type: function
• Required: no

Validation callback.

theme

• Type: string
• Required: no
• Values: light, dark
• Default value: light

Copyright

(c) 2020-2021, Pittica S.r.l..