From 1aeb2e12560a5497947121d1690a3462db246d65 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Mon, 4 May 2026 11:58:55 +0200 Subject: [PATCH 1/3] add new prop to table --- README.md | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 2d6dcc16c..1c32a4dff 100644 --- a/README.md +++ b/README.md @@ -61,16 +61,17 @@ function App() { The `RemoteFlows` component serves as a provider for authentication and theming. -| Prop | Type | Required | Deprecated | Description | -| --------------- | --------------------------------------------------------------------------------------------- | -------- | ---------- | -------------------------------------------------------------------------------------------------------------- | -| `auth` | `() => Promise<{ accessToken: string, expiresIn: number }>` | No | - | Function to fetch authentication token. Optional when using cookie-based authentication via `credentials` prop | -| `environment` | `'partners' \| 'production' \| 'sandbox' \| 'staging'` | No | - | Environment to use for API calls (defaults to production) | -| `theme` | `ThemeOptions` | No | - | Custom theme configuration | -| `components` | `Components` | No | - | Custom field components for form rendering | -| `proxy` | `{ url: string, headers?: Record }` | No | - | Configuration for API request proxy with optional headers | -| `errorBoundary` | `{ useParentErrorBoundary?: boolean, fallback?: ReactNode \| ((error: Error) => ReactNode) }` | No | - | Error boundary configuration to prevent crashes and show custom fallback UI | -| `debug` | boolean | No | - | useful to see telemetry debugging in console | -| `credentials` | `'include' \| 'same-origin'` | No | - | Credentials mode for fetch requests. Use `'include'` for cookie-based authentication without bearer tokens | +| Prop | Type | Required | Deprecated | Description | +| --------------------------- | --------------------------------------------------------------------------------------------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------- | +| `auth` | `() => Promise<{ accessToken: string, expiresIn: number }>` | No | - | Function to fetch authentication token. Optional when using cookie-based authentication via `credentials` prop | +| `environment` | `'partners' \| 'production' \| 'sandbox' \| 'staging'` | No | - | Environment to use for API calls (defaults to production) | +| `theme` | `ThemeOptions` | No | - | Custom theme configuration | +| `components` | `Components` | No | - | Custom field components for form rendering | +| `proxy` | `{ url: string, headers?: Record }` | No | - | Configuration for API request proxy with optional headers | +| `errorBoundary` | `{ useParentErrorBoundary?: boolean, fallback?: ReactNode \| ((error: Error) => ReactNode) }` | No | - | Error boundary configuration to prevent crashes and show custom fallback UI | +| `debug` | boolean | No | - | useful to see telemetry debugging in console | +| `credentials` | `'include' \| 'same-origin'` | No | - | Credentials mode for fetch requests. Use `'include'` for cookie-based authentication without bearer tokens | +| `transformHtmlToComponents` | `(htmlContent: string) => ReactNode` | No | - | Optional function to transform HTML strings into React components. Useful for customizing HTML content rendering | #### Error Boundary From 9961b5ddcd4a8d6b276b3be71b6908010bbc7371 Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Mon, 4 May 2026 12:01:02 +0200 Subject: [PATCH 2/3] add readme --- README.md | 89 ++++++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 78 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 1c32a4dff..3ee451589 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,8 @@ A React library that provides components for Remote's embedded solution, enablin - [Quick Start](#quick-start) - [Components API](#components-api) - [RemoteFlows](#remoteflows) + - [Error Boundary](#error-boundary) + - [HTML Transformation](#html-transformation) - [Custom Field Components](#custom-field-components) - [Available Flows](#available-flows) - [Authentication](#authentication) @@ -61,17 +63,18 @@ function App() { The `RemoteFlows` component serves as a provider for authentication and theming. -| Prop | Type | Required | Deprecated | Description | -| --------------------------- | --------------------------------------------------------------------------------------------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------- | -| `auth` | `() => Promise<{ accessToken: string, expiresIn: number }>` | No | - | Function to fetch authentication token. Optional when using cookie-based authentication via `credentials` prop | -| `environment` | `'partners' \| 'production' \| 'sandbox' \| 'staging'` | No | - | Environment to use for API calls (defaults to production) | -| `theme` | `ThemeOptions` | No | - | Custom theme configuration | -| `components` | `Components` | No | - | Custom field components for form rendering | -| `proxy` | `{ url: string, headers?: Record }` | No | - | Configuration for API request proxy with optional headers | -| `errorBoundary` | `{ useParentErrorBoundary?: boolean, fallback?: ReactNode \| ((error: Error) => ReactNode) }` | No | - | Error boundary configuration to prevent crashes and show custom fallback UI | -| `debug` | boolean | No | - | useful to see telemetry debugging in console | -| `credentials` | `'include' \| 'same-origin'` | No | - | Credentials mode for fetch requests. Use `'include'` for cookie-based authentication without bearer tokens | -| `transformHtmlToComponents` | `(htmlContent: string) => ReactNode` | No | - | Optional function to transform HTML strings into React components. Useful for customizing HTML content rendering | +| Prop | Type | Required | Deprecated | Description | +| ---------------------------- | --------------------------------------------------------------------------------------------- | -------- | ---------- | -------------------------------------------------------------------------------------------------------------- | +| `auth` | `() => Promise<{ accessToken: string, expiresIn: number }>` | No | - | Function to fetch authentication token. Optional when using cookie-based authentication via `credentials` prop | +| `environment` | `'partners' \| 'production' \| 'sandbox' \| 'staging'` | No | - | Environment to use for API calls (defaults to production) | +| `theme` | `ThemeOptions` | No | - | Custom theme configuration | +| `components` | `Components` | No | - | Custom field components for form rendering | +| `proxy` | `{ url: string, headers?: Record }` | No | - | Configuration for API request proxy with optional headers | +| `errorBoundary` | `{ useParentErrorBoundary?: boolean, fallback?: ReactNode \| ((error: Error) => ReactNode) }` | No | - | Error boundary configuration to prevent crashes and show custom fallback UI | +| `debug` | boolean | No | - | useful to see telemetry debugging in console | +| `credentials` | `'include' \| 'same-origin'` | No | - | Credentials mode for fetch requests. Use `'include'` for cookie-based authentication without bearer tokens | +| `transformHtmlToComponents` | `(htmlContent: string) => ReactNode` | No | - | Optional function to transform HTML strings into React components. Useful for customizing HTML content rendering | + #### Error Boundary @@ -107,6 +110,70 @@ The `errorBoundary` prop controls how the SDK handles runtime errors to prevent - When `useParentErrorBoundary: false` without `fallback` → Shows default error message: "Something went wrong in RemoteFlows. Please refresh the page." - When `useParentErrorBoundary: false` with `fallback` → Shows your custom fallback UI +#### HTML Transformation + +The `transformHtmlToComponents` prop allows you to transform HTML strings from API responses into custom React components. This is useful for replacing generic HTML patterns with your own component library. + +```tsx +import parse, { domToReact, HTMLReactParserOptions, Element } from 'html-react-parser'; +import DOMPurify from 'dompurify'; + +function transformHtmlToComponents(htmlContent: string) { + // 1. Sanitize HTML first (IMPORTANT for security) + const clean = DOMPurify.sanitize(htmlContent); + + // 2. Define transformation options + const options: HTMLReactParserOptions = { + replace: (domNode) => { + // Transform
to custom Accordion + if (domNode.type === 'tag' && domNode.name === 'details') { + const element = domNode as Element; + if (element.attribs?.['data-component'] === 'Accordion') { + // Find the summary tag + const summaryNode = element.children?.find( + (child) => child.type === 'tag' && child.name === 'summary' + ); + + // Extract content + const summary = summaryNode + ? domToReact(summaryNode.children, options) + : 'Details'; + const content = element.children?.filter( + (child) => !(child.type === 'tag' && child.name === 'summary') + ); + + return ( + + {domToReact(content || [], options)} + + ); + } + } + } + }; + + // 3. Parse and transform + return parse(clean, options); +} + + + {/* Your flows */} + +``` + +**Security Notice:** The function receives **unsanitized HTML**. You are responsible for sanitizing untrusted content before rendering. Consider using: +- [`DOMPurify`](https://github.com/cure53/DOMPurify) - Client-side HTML sanitization +- [`sanitize-html`](https://github.com/apostrophecms/sanitize-html) - Server-side HTML sanitization + +**Common Use Cases:** +- Replace `
` elements with custom accordion components +- Transform links with custom styling or tracking +- Inject custom components for specific HTML patterns marked with `data-component` attributes + ### Custom Field Components You can customize form field components to match your application's design system. From 70f31e1c6519aa960c0ceb581e8172dada25822c Mon Sep 17 00:00:00 2001 From: Gabriel Garcia Date: Mon, 4 May 2026 12:08:12 +0200 Subject: [PATCH 3/3] update readme --- README.md | 41 +++++++++++++++++++++++------------------ 1 file changed, 23 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 3ee451589..d1ae18bb9 100644 --- a/README.md +++ b/README.md @@ -63,18 +63,17 @@ function App() { The `RemoteFlows` component serves as a provider for authentication and theming. -| Prop | Type | Required | Deprecated | Description | -| ---------------------------- | --------------------------------------------------------------------------------------------- | -------- | ---------- | -------------------------------------------------------------------------------------------------------------- | -| `auth` | `() => Promise<{ accessToken: string, expiresIn: number }>` | No | - | Function to fetch authentication token. Optional when using cookie-based authentication via `credentials` prop | -| `environment` | `'partners' \| 'production' \| 'sandbox' \| 'staging'` | No | - | Environment to use for API calls (defaults to production) | -| `theme` | `ThemeOptions` | No | - | Custom theme configuration | -| `components` | `Components` | No | - | Custom field components for form rendering | -| `proxy` | `{ url: string, headers?: Record }` | No | - | Configuration for API request proxy with optional headers | -| `errorBoundary` | `{ useParentErrorBoundary?: boolean, fallback?: ReactNode \| ((error: Error) => ReactNode) }` | No | - | Error boundary configuration to prevent crashes and show custom fallback UI | -| `debug` | boolean | No | - | useful to see telemetry debugging in console | -| `credentials` | `'include' \| 'same-origin'` | No | - | Credentials mode for fetch requests. Use `'include'` for cookie-based authentication without bearer tokens | -| `transformHtmlToComponents` | `(htmlContent: string) => ReactNode` | No | - | Optional function to transform HTML strings into React components. Useful for customizing HTML content rendering | - +| Prop | Type | Required | Deprecated | Description | +| --------------------------- | --------------------------------------------------------------------------------------------- | -------- | ---------- | ---------------------------------------------------------------------------------------------------------------- | +| `auth` | `() => Promise<{ accessToken: string, expiresIn: number }>` | No | - | Function to fetch authentication token. Optional when using cookie-based authentication via `credentials` prop | +| `environment` | `'partners' \| 'production' \| 'sandbox' \| 'staging'` | No | - | Environment to use for API calls (defaults to production) | +| `theme` | `ThemeOptions` | No | - | Custom theme configuration | +| `components` | `Components` | No | - | Custom field components for form rendering | +| `proxy` | `{ url: string, headers?: Record }` | No | - | Configuration for API request proxy with optional headers | +| `errorBoundary` | `{ useParentErrorBoundary?: boolean, fallback?: ReactNode \| ((error: Error) => ReactNode) }` | No | - | Error boundary configuration to prevent crashes and show custom fallback UI | +| `debug` | boolean | No | - | useful to see telemetry debugging in console | +| `credentials` | `'include' \| 'same-origin'` | No | - | Credentials mode for fetch requests. Use `'include'` for cookie-based authentication without bearer tokens | +| `transformHtmlToComponents` | `(htmlContent: string) => ReactNode` | No | - | Optional function to transform HTML strings into React components. Useful for customizing HTML content rendering | #### Error Boundary @@ -115,7 +114,11 @@ The `errorBoundary` prop controls how the SDK handles runtime errors to prevent The `transformHtmlToComponents` prop allows you to transform HTML strings from API responses into custom React components. This is useful for replacing generic HTML patterns with your own component library. ```tsx -import parse, { domToReact, HTMLReactParserOptions, Element } from 'html-react-parser'; +import parse, { + domToReact, + HTMLReactParserOptions, + Element, +} from 'html-react-parser'; import DOMPurify from 'dompurify'; function transformHtmlToComponents(htmlContent: string) { @@ -131,15 +134,15 @@ function transformHtmlToComponents(htmlContent: string) { if (element.attribs?.['data-component'] === 'Accordion') { // Find the summary tag const summaryNode = element.children?.find( - (child) => child.type === 'tag' && child.name === 'summary' + (child) => child.type === 'tag' && child.name === 'summary', ); - + // Extract content const summary = summaryNode ? domToReact(summaryNode.children, options) : 'Details'; const content = element.children?.filter( - (child) => !(child.type === 'tag' && child.name === 'summary') + (child) => !(child.type === 'tag' && child.name === 'summary'), ); return ( @@ -149,7 +152,7 @@ function transformHtmlToComponents(htmlContent: string) { ); } } - } + }, }; // 3. Parse and transform @@ -162,14 +165,16 @@ function transformHtmlToComponents(htmlContent: string) { transformHtmlToComponents={transformHtmlToComponents} > {/* Your flows */} - +; ``` **Security Notice:** The function receives **unsanitized HTML**. You are responsible for sanitizing untrusted content before rendering. Consider using: + - [`DOMPurify`](https://github.com/cure53/DOMPurify) - Client-side HTML sanitization - [`sanitize-html`](https://github.com/apostrophecms/sanitize-html) - Server-side HTML sanitization **Common Use Cases:** + - Replace `
` elements with custom accordion components - Transform links with custom styling or tracking - Inject custom components for specific HTML patterns marked with `data-component` attributes