@sajn/embed-react 0.1.7 → 1.0.0-beta.1

package/README.md

@@ -1,30 +1,49 @@
 # @sajn/embed-react
 
-React component for embedding sajn's e-signature functionality directly into your applications.
+Show the sajn signing page in a React app. Your server creates an embed session through the sajn API, and `<SigningEmbed>` shows the signing page in an iframe. Works with React 18 and 19.
 
-## Installation
+> **Beta.** 1.0 is in beta and published under the `beta` tag on npm. It can change in ways that break your integration before the first stable release, estimated for November 2026. Pin the exact version. For production, 0.x (embedding v1) is stable.
+
+## Install
 
 ```bash
-npm install @sajn/embed-react
+npm install @sajn/embed-react@1.0.0-beta.1
 ```
 
-## Quick Start
+## Use
+
+Your server calls `POST /api/v1/embed-sessions` and returns the `clientSecret`. In your app:
 
 ```tsx
-import { EmbedSignDocument } from '@sajn/embed-react';
-
-function App() {
-  return (
-    <EmbedSignDocument
-      documentId="your-document-id"
-      token="your-token"
-      onSignerCompleted={(data) => console.log('Signed!', data)}
-      onSignerRejected={(data) => console.log('Rejected', data)}
-    />
-  );
-}
+"use client";
+
+import { SigningEmbed } from "@sajn/embed-react";
+
+const fetchClientSecret = async () => {
+  const response = await fetch("/api/sajn/embed-session", { method: "POST" });
+  if (!response.ok) throw new Error("Signing isn't available right now.");
+  return (await response.json()).clientSecret;
+};
+
+export const SigningPage = () => (
+  <SigningEmbed
+    fetchClientSecret={fetchClientSecret}
+    appearance={{ colors: { primary: "#0f766e" } }}
+    style={{ height: "80vh" }}
+    onSigned={({ documentId }) => console.log("Signed", documentId)}
+    onError={({ code, message }) => console.error(code, message)}
+  />
+);
 ```
 
+The component calls `fetchClientSecret` again each time a session ends, so your endpoint must create a new session on every call. `className` and `style` apply to the container, so give it a height there.
+
+## Props
+
+`fetchClientSecret` (required), `host`, `appearance`, `locale`, `title`, `fallbackHeight`, `className`, and `style`, plus the callbacks `onReady`, `onSigned`, `onRejected`, `onFieldsSubmitted`, `onVerified`, `onStateChange`, `onResize`, `onSessionExpired`, and `onError`.
+
+A change to `appearance` or `locale` updates the open frame. A change to `host`, `title`, or `fallbackHeight` mounts a new frame with a new session. Callbacks are read from the latest render, so inline functions never reload the frame.
+
 ## Documentation
 
-For full documentation, events, and configuration options, see the [main README](https://github.com/sajn-se/embeds#readme).
+[Embed signing with React](https://docs.sajn.se/guides/embedding-v2/react) has the server step, a Next.js example, the events, the appearance options, the error codes, and troubleshooting.

package/dist/index.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const E=require("react/jsx-runtime"),n=require("react"),C=require("@sajn/embed-js"),b=({fetchClientSecret:r,host:u,appearance:o,locale:i,title:g,fallbackHeight:f,openUrl:s,className:y,style:j,...S})=>{const a=n.useRef(null),d=n.useRef(null),t=n.useRef({fetchClientSecret:r,callbacks:S,openUrl:s});t.current={fetchClientSecret:r,callbacks:S,openUrl:s};const l=!!s;n.useEffect(()=>{const R=a.current;if(!R)return;const e=c=>((...x)=>t.current.callbacks[c]?.(...x)),m=C.createSigningEmbed({container:R,host:u,title:g,fallbackHeight:f,appearance:o,locale:i,fetchClientSecret:()=>t.current.fetchClientSecret(),openUrl:l?c=>t.current.openUrl?.(c):void 0,onReady:e("onReady"),onSigned:e("onSigned"),onRejected:e("onRejected"),onFieldsSubmitted:e("onFieldsSubmitted"),onFieldsProgress:e("onFieldsProgress"),onFieldsChanged:e("onFieldsChanged"),onVerified:e("onVerified"),onStateChange:e("onStateChange"),onResize:e("onResize"),onSessionExpired:e("onSessionExpired"),onError:e("onError")});return d.current=m,()=>{m.destroy(),d.current=null}},[u,g,f,l]);const F=JSON.stringify(o??null);return n.useEffect(()=>{d.current?.update({appearance:o,locale:i})},[F,i]),E.jsx("div",{ref:a,className:y,style:j})},V=r=>E.jsx(b,{title:"Visa dokument",...r});exports.SigningEmbed=b;exports.ViewingEmbed=V;

package/dist/index.d.cts

@@ -0,0 +1,43 @@
+import { Appearance } from '@sajn/embed-js';
+import { CSSProperties } from 'react';
+import { EmbedErrorCode } from '@sajn/embed-js';
+import { EmbedIds } from '@sajn/embed-js';
+import { EmbedState } from '@sajn/embed-js';
+import { JSX } from 'react/jsx-runtime';
+import { Locale } from '@sajn/embed-js';
+import { PartyStatus } from '@sajn/embed-js';
+import { SigningEmbedCallbacks } from '@sajn/embed-js';
+import { SigningEmbedError } from '@sajn/embed-js';
+
+export { Appearance }
+
+export { EmbedErrorCode }
+
+export { EmbedIds }
+
+export { EmbedState }
+
+export { Locale }
+
+export { PartyStatus }
+
+export declare const SigningEmbed: ({ fetchClientSecret, host, appearance, locale, title, fallbackHeight, openUrl, className, style, ...callbacks }: SigningEmbedProps) => JSX.Element;
+
+export { SigningEmbedError }
+
+export declare type SigningEmbedProps = SigningEmbedCallbacks & {
+    fetchClientSecret: () => Promise<string>;
+    host?: string;
+    appearance?: Appearance;
+    locale?: Locale;
+    title?: string;
+    fallbackHeight?: string;
+    /** Opens the eID pages and the BankID app link yourself, where the frame can't open a window. */
+    openUrl?: (url: string) => void;
+    className?: string;
+    style?: CSSProperties;
+};
+
+export declare const ViewingEmbed: (props: SigningEmbedProps) => JSX.Element;
+
+export { }

package/dist/index.d.mts

@@ -1,4 +1,43 @@
-export { default as EmbedSignDocument } from './sign-document';
-export type { Language, SignatureInputMode, EmbedSignDocumentProps } from './sign-document';
-export { default as EmbedViewDocument } from './view-document';
-export type { EmbedViewDocumentProps } from './view-document';
+import { Appearance } from '@sajn/embed-js';
+import { CSSProperties } from 'react';
+import { EmbedErrorCode } from '@sajn/embed-js';
+import { EmbedIds } from '@sajn/embed-js';
+import { EmbedState } from '@sajn/embed-js';
+import { JSX } from 'react/jsx-runtime';
+import { Locale } from '@sajn/embed-js';
+import { PartyStatus } from '@sajn/embed-js';
+import { SigningEmbedCallbacks } from '@sajn/embed-js';
+import { SigningEmbedError } from '@sajn/embed-js';
+
+export { Appearance }
+
+export { EmbedErrorCode }
+
+export { EmbedIds }
+
+export { EmbedState }
+
+export { Locale }
+
+export { PartyStatus }
+
+export declare const SigningEmbed: ({ fetchClientSecret, host, appearance, locale, title, fallbackHeight, openUrl, className, style, ...callbacks }: SigningEmbedProps) => JSX.Element;
+
+export { SigningEmbedError }
+
+export declare type SigningEmbedProps = SigningEmbedCallbacks & {
+    fetchClientSecret: () => Promise<string>;
+    host?: string;
+    appearance?: Appearance;
+    locale?: Locale;
+    title?: string;
+    fallbackHeight?: string;
+    /** Opens the eID pages and the BankID app link yourself, where the frame can't open a window. */
+    openUrl?: (url: string) => void;
+    className?: string;
+    style?: CSSProperties;
+};
+
+export declare const ViewingEmbed: (props: SigningEmbedProps) => JSX.Element;
+
+export { }

package/dist/index.mjs

@@ -1,86 +1,44 @@
-import { jsx as s } from "react/jsx-runtime";
-import { useRef as r, useCallback as d, useEffect as i } from "react";
-function g(e) {
-  const t = r(null);
-  function o() {
-    const n = e.host || "https://app.sajn.se", c = btoa(
-      encodeURIComponent(
-        JSON.stringify({
-          language: e.language ?? "en",
-          cssVars: e.cssVars,
-          allowDocumentRejection: e.allowDocumentRejection,
-          showScrollIndicator: e.showScrollIndicator ?? !0,
-          signatureInputModes: e.signatureInputModes,
-          ...e.additionalProps
-        })
-      )
-    );
-    return `${new URL(`/embed/sign/${e.documentId}?token=${e.token}`, n)}#${c}`;
-  }
-  const a = d(
-    (n) => {
-      if (t.current?.contentWindow === n.source)
-        switch (n.data.action) {
-          case "document-ready":
-            t.current?.contentWindow?.postMessage(
-              { action: "embed-init" },
-              new URL(e.host || "https://app.sajn.se").origin
-            ), e.onDocumentReady?.();
-            break;
-          case "signer-completed":
-            e.onSignerCompleted?.(n.data.data);
-            break;
-          case "document-error":
-            e.onDocumentError?.(n.data.data);
-            break;
-          case "signer-rejected":
-            e.onSignerRejected?.(n.data.data);
-            break;
-        }
-    },
-    [e.host, e.onDocumentReady, e.onSignerCompleted, e.onDocumentError, e.onSignerRejected]
-  );
-  return i(() => (window.addEventListener("message", a), () => {
-    window.removeEventListener("message", a);
-  }), [a]), /* @__PURE__ */ s("iframe", { ref: t, className: e.className, src: o() });
-}
-function w(e) {
-  const t = r(null);
-  function o() {
-    const n = e.host || "https://app.sajn.se", c = btoa(
-      encodeURIComponent(
-        JSON.stringify({
-          language: e.language ?? "en",
-          cssVars: e.cssVars,
-          showScrollIndicator: e.showScrollIndicator ?? !0,
-          ...e.additionalProps
-        })
-      )
-    );
-    return `${new URL(`/embed/view/${e.documentId}?token=${e.token}`, n)}#${c}`;
-  }
-  const a = d(
-    (n) => {
-      if (t.current?.contentWindow === n.source)
-        switch (n.data.action) {
-          case "document-ready":
-            t.current?.contentWindow?.postMessage(
-              { action: "embed-init" },
-              new URL(e.host || "https://app.sajn.se").origin
-            ), e.onDocumentReady?.();
-            break;
-          case "document-error":
-            e.onDocumentError?.(n.data.data);
-            break;
-        }
-    },
-    [e.host, e.onDocumentReady, e.onDocumentError]
-  );
-  return i(() => (window.addEventListener("message", a), () => {
-    window.removeEventListener("message", a);
-  }), [a]), /* @__PURE__ */ s("iframe", { ref: t, className: e.className, src: o() });
-}
+import { jsx as p } from "react/jsx-runtime";
+import { useRef as c, useEffect as E } from "react";
+import { createSigningEmbed as h } from "@sajn/embed-js";
+const x = ({ fetchClientSecret: n, host: u, appearance: o, locale: t, title: f, fallbackHeight: g, openUrl: i, className: F, style: y, ...m }) => {
+  const S = c(null), s = c(null), r = c({ fetchClientSecret: n, callbacks: m, openUrl: i });
+  r.current = { fetchClientSecret: n, callbacks: m, openUrl: i };
+  const a = !!i;
+  E(() => {
+    const l = S.current;
+    if (!l) return;
+    const e = (d) => ((...b) => r.current.callbacks[d]?.(...b)), R = h({
+      container: l,
+      host: u,
+      title: f,
+      fallbackHeight: g,
+      appearance: o,
+      locale: t,
+      fetchClientSecret: () => r.current.fetchClientSecret(),
+      openUrl: a ? (d) => r.current.openUrl?.(d) : void 0,
+      onReady: e("onReady"),
+      onSigned: e("onSigned"),
+      onRejected: e("onRejected"),
+      onFieldsSubmitted: e("onFieldsSubmitted"),
+      onFieldsProgress: e("onFieldsProgress"),
+      onFieldsChanged: e("onFieldsChanged"),
+      onVerified: e("onVerified"),
+      onStateChange: e("onStateChange"),
+      onResize: e("onResize"),
+      onSessionExpired: e("onSessionExpired"),
+      onError: e("onError")
+    });
+    return s.current = R, () => {
+      R.destroy(), s.current = null;
+    };
+  }, [u, f, g, a]);
+  const C = JSON.stringify(o ?? null);
+  return E(() => {
+    s.current?.update({ appearance: o, locale: t });
+  }, [C, t]), /* @__PURE__ */ p("div", { ref: S, className: F, style: y });
+}, w = (n) => /* @__PURE__ */ p(x, { title: "Visa dokument", ...n });
 export {
-  g as EmbedSignDocument,
-  w as EmbedViewDocument
+  x as SigningEmbed,
+  w as ViewingEmbed
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sajn/embed-react",
-  "version": "0.1.7",
-  "description": "React component for embedding sajn e-signature functionality",
+  "version": "1.0.0-beta.1",
+  "description": "React component for embedded sajn e-signing",
   "homepage": "https://github.com/sajn-se/embeds#readme",
   "bugs": {
     "url": "https://github.com/sajn-se/embeds/issues"
@@ -12,7 +12,7 @@
   },
   "license": "MIT",
   "author": "sajn",
-  "type": "commonjs",
+  "type": "module",
   "exports": {
     "./package.json": "./package.json",
     ".": {
@@ -21,13 +21,13 @@
         "default": "./dist/index.mjs"
       },
       "require": {
-        "types": "./dist/index.d.ts",
-        "default": "./dist/index.js"
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
       }
     }
   },
-  "main": "dist/index.js",
-  "types": "dist/index.d.ts",
+  "main": "dist/index.cjs",
+  "types": "dist/index.d.cts",
   "files": [
     "dist"
   ],
@@ -45,6 +45,9 @@
     "access": "public"
   },
   "module": "dist/index.mjs",
+  "dependencies": {
+    "@sajn/embed-js": "^1.0.0-beta.1"
+  },
   "scripts": {
     "build": "vite build",
     "clean": "rimraf node_modules && rimraf dist",

package/dist/css-vars.d.ts

@@ -1,10 +0,0 @@
-export type CssVars = {
-    /** Page background color */
-    background?: string | null;
-    /** Primary action/button color (brand color) */
-    primary?: string | null;
-    /** Main text color (for dark theme support) */
-    foreground?: string | null;
-    /** Secondary/muted text color */
-    mutedForeground?: string | null;
-};

package/dist/index.d.ts

@@ -1,4 +0,0 @@
-export { default as EmbedSignDocument } from './sign-document';
-export type { Language, SignatureInputMode, EmbedSignDocumentProps } from './sign-document';
-export { default as EmbedViewDocument } from './view-document';
-export type { EmbedViewDocumentProps } from './view-document';

package/dist/index.js

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),c=require("react");function d(e){const t=c.useRef(null);function o(){const n=e.host||"https://app.sajn.se",s=btoa(encodeURIComponent(JSON.stringify({language:e.language??"en",cssVars:e.cssVars,allowDocumentRejection:e.allowDocumentRejection,showScrollIndicator:e.showScrollIndicator??!0,signatureInputModes:e.signatureInputModes,...e.additionalProps})));return`${new URL(`/embed/sign/${e.documentId}?token=${e.token}`,n)}#${s}`}const a=c.useCallback(n=>{if(t.current?.contentWindow===n.source)switch(n.data.action){case"document-ready":t.current?.contentWindow?.postMessage({action:"embed-init"},new URL(e.host||"https://app.sajn.se").origin),e.onDocumentReady?.();break;case"signer-completed":e.onSignerCompleted?.(n.data.data);break;case"document-error":e.onDocumentError?.(n.data.data);break;case"signer-rejected":e.onSignerRejected?.(n.data.data);break}},[e.host,e.onDocumentReady,e.onSignerCompleted,e.onDocumentError,e.onSignerRejected]);return c.useEffect(()=>(window.addEventListener("message",a),()=>{window.removeEventListener("message",a)}),[a]),r.jsx("iframe",{ref:t,className:e.className,src:o()})}function u(e){const t=c.useRef(null);function o(){const n=e.host||"https://app.sajn.se",s=btoa(encodeURIComponent(JSON.stringify({language:e.language??"en",cssVars:e.cssVars,showScrollIndicator:e.showScrollIndicator??!0,...e.additionalProps})));return`${new URL(`/embed/view/${e.documentId}?token=${e.token}`,n)}#${s}`}const a=c.useCallback(n=>{if(t.current?.contentWindow===n.source)switch(n.data.action){case"document-ready":t.current?.contentWindow?.postMessage({action:"embed-init"},new URL(e.host||"https://app.sajn.se").origin),e.onDocumentReady?.();break;case"document-error":e.onDocumentError?.(n.data.data);break}},[e.host,e.onDocumentReady,e.onDocumentError]);return c.useEffect(()=>(window.addEventListener("message",a),()=>{window.removeEventListener("message",a)}),[a]),r.jsx("iframe",{ref:t,className:e.className,src:o()})}exports.EmbedSignDocument=d;exports.EmbedViewDocument=u;

package/dist/sign-document.d.ts

@@ -1,35 +0,0 @@
-import { CssVars } from './css-vars';
-export type Language = 'sv' | 'en' | 'no' | 'da' | 'fi' | 'de' | 'is' | 'es' | 'fr' | 'it';
-export type SignatureInputMode = 'draw' | 'type' | 'upload';
-export type EmbedSignDocumentProps = {
-    language?: Language;
-    className?: string;
-    host?: string;
-    token: string;
-    documentId: string;
-    cssVars?: (CssVars & Record<string, string>) | undefined;
-    allowDocumentRejection?: boolean | undefined;
-    showScrollIndicator?: boolean | undefined;
-    /** Which signature input modes the pad offers (default: all). Only narrows the workspace allowlist. */
-    signatureInputModes?: SignatureInputMode[] | undefined;
-    additionalProps?: Record<string, string | number | boolean> | undefined;
-    onDocumentReady?: () => void;
-    onSignerCompleted?: (data: {
-        token: string;
-        documentId: string;
-        signerId: string;
-        failed?: string;
-    }) => void;
-    onDocumentError?: (data: {
-        code: string;
-        message: string;
-    }) => void;
-    onSignerRejected?: (data: {
-        token: string;
-        documentId: string;
-        signerId: string;
-        reason: string;
-    }) => void;
-};
-declare function EmbedSignDocument(props: EmbedSignDocumentProps): import("react/jsx-runtime").JSX.Element;
-export default EmbedSignDocument;

package/dist/view-document.d.ts

@@ -1,19 +0,0 @@
-import { CssVars } from './css-vars';
-export type Language = 'sv' | 'en' | 'no' | 'da' | 'fi' | 'de' | 'is' | 'es' | 'fr' | 'it';
-export type EmbedViewDocumentProps = {
-    language?: Language;
-    className?: string;
-    host?: string;
-    token: string;
-    documentId: string;
-    cssVars?: (CssVars & Record<string, string>) | undefined;
-    showScrollIndicator?: boolean | undefined;
-    additionalProps?: Record<string, string | number | boolean> | undefined;
-    onDocumentReady?: () => void;
-    onDocumentError?: (data: {
-        code: string;
-        message: string;
-    }) => void;
-};
-declare function EmbedViewDocument(props: EmbedViewDocumentProps): import("react/jsx-runtime").JSX.Element;
-export default EmbedViewDocument;