fix(mount): Handle multiple calls to componentDidMount

src/index.js

@@ -191,9 +191,14 @@ class HCaptcha extends React.Component {
       this.apiScriptRequested = true;
     }
 
-    renderCaptcha(onReady) {
-      const { isApiReady } = this.state;
-      if (!isApiReady) return;
+    renderCaptcha(onRender) {
+      const { isApiReady, captchaId } = this.state;
+      const { onReady } = this.props;
+
+      // Prevent calling hCaptcha render on two conditions:
+      // • API is not ready
+      // • Component has already been mounted
+      if (!isApiReady || captchaId) return;
 
       const renderParams = Object.assign({
         "open-callback"       : this.handleOpen,
@@ -209,10 +214,11 @@ class HCaptcha extends React.Component {
 
       const hcaptcha = this._hcaptcha;
       //Render hCaptcha widget and provide necessary callbacks - hCaptcha
-      const captchaId = hcaptcha.render(this.ref.current, renderParams);
+      const id = hcaptcha.render(this.ref.current, renderParams);
 
-      this.setState({ isRemoved: false, captchaId }, () => {
-        onReady && onReady();
+      this.setState({ isRemoved: false, captchaId: id }, () => {
+        onRender && onRender();
+        onReady  && onReady();
       });
     }
 
@@ -341,6 +347,17 @@ class HCaptcha extends React.Component {
       return hcaptcha.execute(captchaId, opts);
     }
 
+    close() {
+      const { captchaId } = this.state;
+      const hcaptcha = this._hcaptcha;
+
+      if (!this.isReady()) {
+        return;
+      }
+
+      return hcaptcha.close(captchaId);
+    }
+
     setData (data) {
       const { captchaId } = this.state;
       const hcaptcha = this._hcaptcha;

tests/hcaptcha.spec.js

@@ -154,12 +154,19 @@ describe("hCaptcha", () => {
         expect(window.hcaptcha.setData.mock.calls[0][1]).toBe(dataObj);
     });
 
-    it("emits onLoad event", () => {
+    it("should emit onLoad event if no hCaptcha ID is stored", () => {
+        instance.state.captchaId = '';
         expect(mockFns.onLoad.mock.calls.length).toBe(0);
         instance.handleOnLoad();
         expect(mockFns.onLoad.mock.calls.length).toBe(1);
     });
 
+    it("should not emit onLoad event if hCapthcha ID is found", () => {
+        instance.handleOnLoad();
+        expect(mockFns.onLoad.mock.calls.length).toBe(0);
+    });
+
+
     it("emits verify with token and eKey", () => {
         expect(mockFns.onVerify.mock.calls.length).toBe(0);
         instance.handleSubmit();
@@ -324,19 +331,17 @@ describe("hCaptcha", () => {
 
     it("should not set id if no id prop is passed", (done) => {
 
-        const onLoad = jest.fn(() => {
+        const onReady = jest.fn(() => {
             expect(instance.state.captchaId).toBe(MOCK_WIDGET_ID);
             done();
         });
 
         instance = ReactTestUtils.renderIntoDocument(
             <HCaptcha
                 sitekey={TEST_PROPS.sitekey}
-                onLoad={onLoad}
+                onReady={onReady}
             />,
         );
-
-        instance.handleOnLoad();
     });