Merge pull request #10 from Pyrax/feat-recaptcha-props

Feat recaptcha props

Author: Pyrax

.prettierrc

@@ -6,5 +6,6 @@
   "bracketSpacing": true,
   "jsxBracketSameLine": false,
   "arrowParens": "always",
-  "trailingComma": "none"
+  "trailingComma": "none",
+  "endOfLine": "auto"
 }

src/recaptcha.js

@@ -2,12 +2,19 @@ import React from 'react'
 import { useNetlifyFormContext } from './netlify-form-context'
 import GoogleRecaptcha from 'react-google-recaptcha'
 
-export const Recaptcha = ({ siteKey = '', invisible = false }) => {
+export const Recaptcha = ({
+  siteKey = '',
+  invisible = false,
+  ...passThroughProps
+}) => {
   const { recaptchaRef } = useNetlifyFormContext()
 
-  return invisible ? (
-    <GoogleRecaptcha sitekey={siteKey} ref={recaptchaRef} size='invisible' />
-  ) : (
-    <GoogleRecaptcha sitekey={siteKey} ref={recaptchaRef} />
+  return (
+    <GoogleRecaptcha
+      {...passThroughProps}
+      sitekey={siteKey}
+      ref={recaptchaRef}
+      {...(invisible ? { size: 'invisible' } : {})}
+    />
   )
 }

www/src/pages/docs.mdx

@@ -84,10 +84,11 @@ In Netlify dashboard you have to set SITE_RECAPTCHA_KEY and SITE_RECAPTCHA_SECRE
 
 Available props:
 
-| Name      | Req | Description                                       |
-| --------- | --- | ------------------------------------------------- |
-| siteKey   | Y   | Recaptcha public site key.                        |
-| invisible | N   | Set whether reCAPTCHA should be invisible or not. |
+| Name      | Req | Description                                                                                                                                |
+| --------- | --- | ------------------------------------------------------------------------------------------------------------------------------------------ |
+| siteKey   | Y   | Recaptcha public site key.                                                                                                                 |
+| invisible | N   | Set whether reCAPTCHA should be invisible or not.                                                                                          |
+| *(any)*   | N   | Any other prop will be passed through to the [underlying component](https://www.npmjs.com/package/react-google-recaptcha#component-props). |
 
 <!-- prettier-ignore -->
 *[Req]: Required