@hcaptcha/react-hcaptcha - npm Package Compare versions

Comparing version 0.1.7 to 0.1.8

dist/index.js

@@ -1,2 +0,2 @@
-"use strict";
+'use strict';
 
@@ -15,5 +15,18 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-// Create random ID
-var randomID = function randomID() {
-  return "" + (Number(String(Math.random()).slice(2)) + Date.now() + Math.round(performance.now())).toString(36);
+// Borrowed from https://github.com/ai/nanoid/blob/3.0.2/non-secure/index.js
+// This alphabet uses `A-Za-z0-9_-` symbols. A genetic algorithm helped
+// optimize the gzip compression for this alphabet.
+var urlAlphabet = 'ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW';
+
+var nanoid = function nanoid() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 21;
+
+  var id = '';
+  // A compact alternative for `for (var i = 0; i < step; i++)`.
+  var i = size;
+  while (i--) {
+    // `| 0` is more compact and faster than `Math.floor()`.
+    id += urlAlphabet[Math.random() * 64 | 0];
+  }
+  return id;
 };
@@ -30,3 +43,3 @@
   if (hl) {
-    script.src += "&hl=" + hl;
+    script.src += '&hl=' + hl;
   }
@@ -59,3 +72,3 @@
       isRemoved: false,
-      elementId: "hcaptcha-" + randomID(),
+      elementId: 'hcaptcha-' + nanoid(),
       captchaId: ''
@@ -67,3 +80,3 @@ };
   _createClass(HCaptcha, [{
-    key: "componentDidMount",
+    key: 'componentDidMount',
     value: function componentDidMount() {
@@ -86,3 +99,3 @@ //Once captcha is mounted intialize hCaptcha - hCaptcha
   }, {
-    key: "componentWillUnmount",
+    key: 'componentWillUnmount',
     value: function componentWillUnmount() {
@@ -101,3 +114,3 @@ var _state2 = this.state,
   }, {
-    key: "shouldComponentUpdate",
+    key: 'shouldComponentUpdate',
     value: function shouldComponentUpdate(nextProps, nextState) {
@@ -112,3 +125,3 @@ // Prevent component re-rendering when these internal state variables are updated
   }, {
-    key: "componentDidUpdate",
+    key: 'componentDidUpdate',
     value: function componentDidUpdate(prevProps) {
@@ -134,3 +147,3 @@ var _this2 = this;
   }, {
-    key: "renderCaptcha",
+    key: 'renderCaptcha',
     value: function renderCaptcha() {
@@ -153,3 +166,3 @@ var _state3 = this.state,
   }, {
-    key: "resetCaptcha",
+    key: 'resetCaptcha',
     value: function resetCaptcha() {
@@ -167,3 +180,3 @@ var _state4 = this.state,
   }, {
-    key: "removeCaptcha",
+    key: 'removeCaptcha',
     value: function removeCaptcha() {
@@ -182,3 +195,3 @@ var _state5 = this.state,
   }, {
-    key: "handleOnLoad",
+    key: 'handleOnLoad',
     value: function handleOnLoad() {
@@ -189,3 +202,3 @@ this.setState({ isApiReady: true });
   }, {
-    key: "handleSubmit",
+    key: 'handleSubmit',
     value: function handleSubmit(event) {
@@ -204,3 +217,3 @@ var onVerify = this.props.onVerify;
   }, {
-    key: "handleExpire",
+    key: 'handleExpire',
     value: function handleExpire() {
@@ -220,3 +233,3 @@ var onExpire = this.props.onExpire;
   }, {
-    key: "handleError",
+    key: 'handleError',
     value: function handleError(event) {
@@ -236,3 +249,3 @@ var onError = this.props.onError;
   }, {
-    key: "execute",
+    key: 'execute',
     value: function execute() {
@@ -250,7 +263,7 @@ var _state9 = this.state,
   }, {
-    key: "render",
+    key: 'render',
     value: function render() {
       var elementId = this.state.elementId;
 
-      return React.createElement("div", { id: elementId });
+      return React.createElement('div', { id: elementId });
     }
@@ -257,0 +270,0 @@ }]);

package.json

 {
   "name": "@hcaptcha/react-hcaptcha",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "A React library for hCaptcha",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

README.md

@@ -7,3 +7,3 @@ # React hCaptcha Component Library
 
-[hCaptcha](https://www.hcaptcha.com) is an easy to use replacement for reCAPTCHA that helps monetize your website.
+[hCaptcha](https://www.hcaptcha.com) is a drop-replacement for reCAPTCHA that protects user privacy, rewards websites, and helps companies get their data labeled.
 
@@ -21,18 +21,45 @@ Sign up at [hCaptcha](https://wwww.hcaptcha.com) to get your sitekey today. **You need a sitekey to use this captcha solution.**
 ### Usage
+The two requirements for usage are the `sitekey` [prop](#props) and a `parent component` such as a `<form />`. The component will automatically include and load the
+hCaptcha API library and append it to the parent component. This is designed for ease of use with the hCaptcha API!
 
 #### Basic Usage
 
+```js
+import HCaptcha from '@hcaptcha/react-hcaptcha';
+
+<FormComponent>
+    <HCaptcha 
+      sitekey="your-sitekey" 
+      onVerify={token => handleVerificationSuccess(token)}
+    />
+</FormComponent>
 ```
-import hCaptcha from '@hcaptcha/react-hcaptcha';
 
+#### Usage with TypeScript
+Add the types from DefinitelyTyped
+
+```
+npm i -D @types/hcaptcha__react-hcaptcha
+```
+
+**A note about TypeScript usage:** If you want to reassign the component name, you could consider making a util that imports the component, then re-exports it as a default. Example:
+
+```ts
+// utils/captcha.ts
+import HCaptcha from '@hcaptcha/react-hcaptcha';
+export default HCaptcha;
+
+// MyFormComponent.tsx
+import { default as RenamedCaptcha } from '../utils/captcha';
 <FormComponent>
-    <hCaptcha sitekey="**Your sitekey here**" onVerify={token => handleVerificationSuccess(token)}/>
+  <RenamedCaptcha sitekey="your-sitekey" />
 </FormComponent>
 ```
 
-The two required props are the sitekey and root component. The component will automatically include and load the
-hCaptcha API library and append it to the root component. This is designed for ease of use with the hCaptcha API!
+#### Advanced usage
 
-Props include:
+In most real-world implementations, you'll probably be using a form library such as [Formik](https://github.com/jaredpalmer/formik) or [React Hook Form](https://github.com/react-hook-form/react-hook-form). In these instances, you'll most likely want to use `forwardRef` to handle the callbacks as well as handle field-level validation of a `captcha` field. For an example of this, you can view this [CodeSandbox](https://codesandbox.io/s/react-hcaptcha-formik-example-2u5ut)
 
+### Props
+
 - sitekey: String, **Required**
@@ -39,0 +66,0 @@ - This is your sitekey. It allows you to load hCaptcha, and to configure options like difficulty on the hCaptcha dashboard.

src/index.js

 const React = require('react');
 
-// Create random ID
-const randomID = () => `${(Number(String(Math.random()).slice(2)) + Date.now() + Math.round(performance.now())).toString(36)}`;
+// Borrowed from https://github.com/ai/nanoid/blob/3.0.2/non-secure/index.js
+// This alphabet uses `A-Za-z0-9_-` symbols. A genetic algorithm helped
+// optimize the gzip compression for this alphabet.
+const urlAlphabet =
+  'ModuleSymbhasOwnPr-0123456789ABCDEFGHNRVfgctiUvz_KqYTJkLxpZXIjQW'
 
+const nanoid = (size = 21) => {
+  let id = ''
+  // A compact alternative for `for (var i = 0; i < step; i++)`.
+  let i = size
+  while (i--) {
+    // `| 0` is more compact and faster than `Math.floor()`.
+    id += urlAlphabet[(Math.random() * 64) | 0]
+  }
+  return id
+}
+
  // Create script to init hCaptcha
@@ -40,3 +54,3 @@ const CaptchaScript = (cb, hl) => {
         isRemoved: false,
-        elementId: `hcaptcha-${randomID()}`,
+        elementId: `hcaptcha-${nanoid()}`,
         captchaId: ''
@@ -43,0 +57,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

30909

increased by7.1%

Lines of code

585

increased by4.28%

Number of lines in readme file

94

increased by40.3%

No dependency changes