reaptcha - npm Package Compare versions

Comparing version 1.5.1 to 1.6.0

index.d.ts

 import * as React from 'react';
 
+export type RenderProps = {
+  renderExplicitly: () => Promise<void>;
+  reset: () => Promise<void>;
+  execute: () => Promise<void>;
+  recaptchaComponent: React.ReactNode;
+};
+
 export interface ReaptchaProps {
@@ -20,2 +27,3 @@ id?: string;
   hl?: string;
+  children?: (renderProps: RenderProps) => React.ReactNode;
 }
@@ -22,0 +30,0 @@

package.json

 {
   "name": "reaptcha",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "description": "Google reCAPTCHA for React",
@@ -26,3 +26,3 @@ "repository": {
   },
-  "gitHead": "1fdfb810c6234a47b849d99583e02d16686b23c7"
+  "gitHead": "94ad7e0481d43a9c919a86cdc80cb3be249d932a"
 }

README.md

@@ -231,2 +231,22 @@ ![Reaptcha](https://i.imgur.com/44zEjD5.png)
 
+### Render prop
+
+Using instance methods can be avoided by passing `children` render function.
+
+```js
+<Reaptcha>
+  {({ renderExplicitly, reset, execute, recaptchaComponent }) => {
+    return (
+      <div>
+        {recaptchaComponent}
+
+        <button onClick={reset}>Reset</button>
+      </div>
+    );
+  }}
+</Reaptcha>
+```
+
+When passing `children` render prop, you are responsible for rendering `recaptchaComponent` into the DOM.
+
 ## Customisation
@@ -257,2 +277,3 @@
 | onError   | :heavy_minus_sign: | `Function`                                  | -               | Callback function executed when reCAPTCHA fails with an error                                                                                 |
+| children  | :heavy_minus_sign: | `Function`                                  | -               | Render function that can be used to get access to instance methods without the need to explicitly use refs                                    |
 
@@ -259,0 +280,0 @@ ## Caveats

No alert changes

Improved metrics

Total package byte prevSize

46789

1.98%

Lines of code

631

1.12%

Number of lines in readme file

296

7.64%

No dependency changes