@evervault/react - npm Package Compare versions

Comparing version 2.0.1 to 2.1.0

dist/evervault-react.main.d.ts

@@ -24,3 +24,3 @@ import type EvervaultClient from '@evervault/browser';
 
-export declare const EvervaultReveal: ({ request, config, onRevealLoad, }: EvervaultRevealProps) => React_2.JSX.Element;
+export declare const EvervaultReveal: ({ request, config, onCopy, onRevealLoad, }: EvervaultRevealProps) => React_2.JSX.Element;
 
@@ -30,2 +30,3 @@ export declare interface EvervaultRevealProps {
     config?: any;
+    onCopy?: () => void;
     onRevealLoad?: () => void;
@@ -32,0 +33,0 @@ }

dist/evervault-react.main.js

 "use client";
-import * as i from "react";
+import * as o from "react";
 class f extends Promise {
-  constructor(...t) {
-    super(...t);
+  constructor(...e) {
+    super(...e);
   }
-  encrypt(t) {
-    return this.then((n) => n.encrypt(t));
+  encrypt(e) {
+    return this.then((t) => t.encrypt(e));
   }
 }
-const v = i.createContext(null), E = "https://js.evervault.com/v2", w = () => {
+const v = o.createContext(null), E = "https://js.evervault.com/v2", w = (n) => {
   const e = document.createElement("script");
-  e.src = E;
+  n ? e.src = n : e.src = E;
   const t = document.head || document.body;
@@ -22,3 +22,3 @@ if (!t)
 let d = null;
-const h = () => (d !== null || (d = new Promise((e, t) => {
+const h = (n) => (d !== null || (d = new Promise((e, t) => {
   if (typeof window > "u") {
@@ -33,17 +33,19 @@ e(null);
   try {
-    const n = w();
-    n.addEventListener("load", () => {
+    const r = w(n);
+    r.addEventListener("load", () => {
       window.Evervault ? e(window.Evervault) : t(new Error("Evervault.js not available"));
-    }), n.addEventListener("error", () => {
+    }), r.addEventListener("error", () => {
       t(new Error("Failed to load Evervault.js"));
     });
-  } catch (n) {
-    t(n);
+  } catch (r) {
+    t(r);
     return;
   }
-})), d), m = async () => {
-  const e = Promise.resolve().then(() => h());
+})), d), m = async (n) => {
+  const e = Promise.resolve().then(
+    () => h(n)
+  );
   let t = !1;
-  return e.catch((n) => {
-    t || console.warn(n);
+  return e.catch((r) => {
+    t || console.warn(r);
   }), t = !0, e.then(() => {
@@ -54,14 +56,14 @@ if (typeof window < "u")
 }, p = ({
-  teamId: e,
-  appId: t,
-  customConfig: n,
-  children: a,
-  ...u
+  teamId: n,
+  appId: e,
+  customConfig: t,
+  children: r,
+  ...s
 }) => {
   if (typeof window > "u")
-    return /* @__PURE__ */ i.createElement(v.Provider, { value: null }, a);
-  const o = i.useMemo(
-    () => new f((s, r) => {
-      m().then((l) => {
-        l !== void 0 ? s(new l(e, t, n)) : (console.error("Evervault.js not available"), r("Evervault.js not available"));
+    return /* @__PURE__ */ o.createElement(v.Provider, { value: null }, r);
+  const i = o.useMemo(
+    () => new f((a, u) => {
+      m(t.jsSdkUrl).then((l) => {
+        l !== void 0 ? a(new l(n, e, t)) : (console.error("Evervault.js not available"), u("Evervault.js not available"));
       });
@@ -71,47 +73,48 @@ }),
   );
-  return /* @__PURE__ */ i.createElement(v.Provider, { ...u, value: o }, a);
+  return /* @__PURE__ */ o.createElement(v.Provider, { ...s, value: i }, r);
 }, y = ({
-  onChange: e,
-  config: t,
-  onInputsLoad: n
+  onChange: n,
+  config: e,
+  onInputsLoad: t
 }) => {
-  const a = i.useId();
+  const r = o.useId();
   if (typeof window > "u")
-    return /* @__PURE__ */ i.createElement("div", { id: a });
-  const u = c();
-  let o = t;
-  return o ? o.height || (o = {
+    return /* @__PURE__ */ o.createElement("div", { id: r });
+  const s = c();
+  let i = e;
+  return i ? i.height || (i = {
     height: "auto",
-    ...o
-  }) : o = {
+    ...i
+  }) : i = {
     height: "auto"
-  }, i.useEffect(() => {
-    u == null || u.then((s) => {
-      const r = s.inputs(a, o);
-      r == null || r.on("change", async (l) => {
-        typeof e == "function" && e(l);
-      }), n && (r == null ? void 0 : r.isInputsLoaded) != null && r.isInputsLoaded instanceof Promise && r.isInputsLoaded.then(() => n());
+  }, o.useEffect(() => {
+    s == null || s.then((a) => {
+      const u = a.inputs(r, i);
+      u == null || u.on("change", async (l) => {
+        typeof n == "function" && n(l);
+      }), t && (u == null ? void 0 : u.isInputsLoaded) != null && u.isInputsLoaded instanceof Promise && u.isInputsLoaded.then(() => t());
     });
-  }, [u]), /* @__PURE__ */ i.createElement("div", { id: a });
+  }, [s]), /* @__PURE__ */ o.createElement("div", { id: r });
 }, P = ({
-  request: e,
-  config: t,
-  onRevealLoad: n
+  request: n,
+  config: e,
+  onCopy: t,
+  onRevealLoad: r
 }) => {
-  const a = i.useId();
+  const s = o.useId();
   if (typeof window > "u")
-    return /* @__PURE__ */ i.createElement("div", { id: a });
-  const u = c();
-  let o = t;
-  return o ? o.height || (o = {
+    return /* @__PURE__ */ o.createElement("div", { id: s });
+  const i = c();
+  let a = e;
+  return a ? a.height || (a = {
     height: "auto",
-    ...o
-  }) : o = {
+    ...a
+  }) : a = {
     height: "auto"
-  }, i.useEffect(() => {
-    u == null || u.then((s) => {
-      const r = s.reveal(a, e, o);
-      n && (r == null ? void 0 : r.isRevealLoaded) != null && r.isRevealLoaded instanceof Promise && r.isRevealLoaded.then(() => n());
+  }, o.useEffect(() => {
+    i == null || i.then((u) => {
+      const l = u.reveal(s, n, a, t);
+      r && (l == null ? void 0 : l.isRevealLoaded) != null && l.isRevealLoaded instanceof Promise && l.isRevealLoaded.then(() => r());
     });
-  }, [u]), /* @__PURE__ */ i.createElement("div", { id: a });
+  }, [i]), /* @__PURE__ */ o.createElement("div", { id: s });
 };
@@ -121,12 +124,12 @@ function c() {
     return null;
-  if (typeof i.useContext != "function")
+  if (typeof o.useContext != "function")
     throw new Error(
       "You must use React >= 18.0 in order to use useEvervault()"
     );
-  const e = i.useContext(v);
-  if (!e)
+  const n = o.useContext(v);
+  if (!n)
     throw new Error(
       "You must wrap your app in an <EvervaultProvider> to use useEvervault()"
     );
-  return e;
+  return n;
 }
@@ -133,0 +136,0 @@ export {

package.json

 {
   "private": false,
   "name": "@evervault/react",
-  "version": "2.0.1",
+  "version": "2.1.0",
   "description": "React package for the Evervault SDK",
@@ -29,3 +29,3 @@ "license": "MIT",
   "devDependencies": {
-    "@evervault/browser": "^2.11.0"
+    "@evervault/browser": "^2.12.0"
   },
@@ -32,0 +32,0 @@ "scripts": {

README.md

@@ -292,30 +292,13 @@ [![Evervault](https://evervault.com/evervault.svg)](https://evervault.com/)
 
-| Parameter                           | Type             | Description                                                                                     |
-| ----------------------------------- | ---------------- | ----------------------------------------------------------------------------------------------- |
-| `onRevealLoad`                      | Function         | A function that is called when the iFrame that serves Reveal has loaded.                        |
-| `config`                            | String \| Object | A theme string (supported: default, minimal or material), or a config object for custom styles. |
-| `config.theme`                      | String           | The base styling for Inputs. Currently supports default, minimal and material.                  |
-| `config.height`                     | String           | The height of the Evervault Inputs iframe.                                                      |
-| `config.primaryColor`               | String           | The main theme color.                                                                           |
-| `config.labelColor`                 | String           | The color CSS property applied to the input labels.                                             |
-| `config.inputBorderColor`           | String           | The border-color CSS property applied to inputs.                                                |
-| `config.inputTextColor`             | String           | The color CSS property applied to inputs.                                                       |
-| `config.inputBackgroundColor`       | String           | The color CSS property applied to the ::placeholder CSS pseudo-element for inputs.              |
-| `config.inputBorderRadius`          | String           | The border-radius CSS property applied to inputs.                                               |
-| `config.inputHeight`                | String           | The height CSS property applied to inputs.                                                      |
-| `config.cardNumberLabel`            | String           | The label for the card number input                                                             |
-| `config.expirationDateLabel`        | String           | The label for the expiration date input                                                         |
-| `config.securityCodeLabel`          | String           | The label for the security code input                                                           |
-| `config.expirationDatePlaceholder`  | String           | The placeholder for the expiration date input                                                   |
-| `config.invalidCardNumberLabel`     | String           | The message shown on an invalid card number                                                     |
-| `config.invalidExpirationDateLabel` | String           | The message shown on an invalid expiration date                                                 |
-| `config.invalidSecurityCodeLabel`   | String           | The message shown on an invalid security code                                                   |
-| `config.fontUrl`                    | String           | Load a custom font with the Google Fonts API                                                    |
-| `config.fontFamily`                 | String           | Set the font-family for the fontUrl                                                             |
-| `config.inputFontSize`              | String           | Set the font-size property of the input attribute                                               |
-| `config.inputBoxShadow`             | String           | Set the box-shadow property of the input attribute                                              |
-| `config.labelFontSize`              | String           | Set the font-size property of the label attribute                                               |
-| `config.labelWeight`                | String           | Set the font-weight property of the label attribute                                             |
-| `config.disableCVV`                 | Boolean          | Removes the CVV field from Inputs, showing only the Card Number and Expiry fields               |
-| `config.disableExpiry`              | Boolean          | Removes the Expiry field from Inputs, showing only the Card Number and CVV fields               |
+| Parameter                 | Type             | Description                                                                                     |
+| ------------------------- | ---------------- | ----------------------------------------------------------------------------------------------- |
+| `onRevealLoad`            | Function         | A function that is called when the iFrame that serves Reveal has loaded.                        |
+| `onCopy`                  | Function         | A function that is called when user clicks the copy button inside the Reveal component.         |
+| `config`                  | String \| Object | A theme string (supported: default, minimal or material), or a config object for custom styles. |
+| `config.height`           | String           | The height of the Evervault Inputs iframe.                                                      |
+| `config.fontUrl`          | String           | Load a custom font with the Google Fonts API                                                    |
+| `config.fontFamily`       | String           | Set the font-family for the fontUrl                                                             |
+| `config.revealFontSize`   | String           | Set the font-size property of the reveal text fields                                            |
+| `config.revealFontWeight` | String           | Set the font-weight property of the reveal text fields                                          |
+| `config.revealTextColor`  | String           | Set the font-color property of the reveal text fields                                           |
 
@@ -322,0 +305,0 @@ ## Contributing

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Lines of code

182

increased by2.25%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

24158

decreased by-9.92%

Number of lines in readme file

311

decreased by-5.18%

No dependency changes