@neeleshyadav/react-native-html-renderer 1.1.0

package/LICENSE

@@ -0,0 +1,20 @@
+MIT License
+
+Copyright (c) 2026 Neelesh Yadav
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,407 @@
+# react-native-html-renderer
+
+[![npm version](https://img.shields.io/npm/v/react-native-html-renderer.svg)](https://www.npmjs.com/package/react-native-html-renderer)
+[![license](https://img.shields.io/npm/l/react-native-html-renderer.svg)](https://github.com/Neelesh-FS-Dev/react-native-html-renderer/blob/main/LICENSE)
+[![TypeScript](https://img.shields.io/badge/TypeScript-strict-blue.svg)](https://www.typescriptlang.org/)
+[![CI](https://github.com/Neelesh-FS-Dev/react-native-html-renderer/actions/workflows/ci.yml/badge.svg)](https://github.com/Neelesh-FS-Dev/react-native-html-renderer/actions/workflows/ci.yml)
+
+Renders HTML into 100% native React Native views — actively maintained, TypeScript-first, and lightweight.
+
+A modern replacement for the abandoned `react-native-render-html`.
+
+## Table of Contents
+
+- [Requirements](#requirements)
+- [Installation](#installation)
+- [Basic Usage](#basic-usage)
+- [Props API](#props-api)
+- [Security](#security)
+- [Dark Mode](#dark-mode)
+- [Accessibility](#accessibility)
+- [Font Scaling](#font-scaling)
+- [Supported HTML Tags](#supported-html-tags)
+- [Custom Renderers](#custom-renderers)
+- [Tag & Class Styles](#tag--class-styles)
+- [Hooks](#hooks)
+- [Utility Exports](#utility-exports)
+- [Image Handling](#image-handling)
+- [Debug Mode](#debug-mode)
+- [Limitations](#limitations)
+- [Migration from react-native-render-html v6](#migration-from-react-native-render-html-v6)
+- [Contributing](#contributing)
+- [License](#license)
+
+## Requirements
+
+| Dependency    | Version   |
+| ------------- | --------- |
+| React         | >= 18.0.0 |
+| React Native  | >= 0.71.0 |
+| Node.js       | >= 20     |
+
+## Installation
+
+```sh
+npm install react-native-html-renderer
+```
+
+or
+
+```sh
+yarn add react-native-html-renderer
+```
+
+All other dependencies (`htmlparser2`, `css-to-react-native`) are bundled — no extra installs needed.
+
+## Basic Usage
+
+```tsx
+import { HtmlRenderer } from 'react-native-html-renderer';
+import { useWindowDimensions, Linking } from 'react-native';
+
+function MyComponent() {
+  const { width } = useWindowDimensions();
+
+  return (
+    <HtmlRenderer
+      html="<h1>Hello</h1><p>This is <strong>bold</strong> and <em>italic</em>.</p>"
+      contentWidth={width - 32}
+      onLinkPress={(href) => Linking.openURL(href)}
+    />
+  );
+}
+```
+
+## Props API
+
+| Prop | Type | Default | Description |
+| ---- | ---- | ------- | ----------- |
+| `html` | `string` | *required* | Raw HTML string to render |
+| `contentWidth` | `number` | *required* | Available width for layout and image scaling |
+| `baseStyle` | `ViewStyle` | `undefined` | Style applied to the root container |
+| `tagsStyles` | `Record<string, RNStyle>` | `undefined` | Per-tag style overrides |
+| `classesStyles` | `Record<string, RNStyle>` | `undefined` | Styles applied by HTML class name |
+| `idsStyles` | `Record<string, RNStyle>` | `undefined` | Styles applied by HTML element id |
+| `customRenderers` | `Record<string, CustomRenderer>` | `undefined` | Override rendering for specific tags |
+| `onLinkPress` | `(href, attrs) => void` | `undefined` | Callback for `<a>` tag taps |
+| `onImagePress` | `(src, attrs) => void` | `undefined` | Callback for image taps |
+| `onError` | `(error: Error) => void` | `undefined` | Called on parse or render errors |
+| `fallback` | `ReactNode` | default message | Custom UI to show when an error occurs |
+| `ignoredTags` | `string[]` | `undefined` | Tags to completely skip (including children) |
+| `ignoredStyles` | `string[]` | `undefined` | CSS property names to ignore |
+| `allowedStyles` | `string[]` | `undefined` | Whitelist of CSS properties to allow |
+| `defaultTextProps` | `TextProps` | `undefined` | Default props for all `<Text>` components |
+| `defaultViewProps` | `ViewProps` | `undefined` | Default props for all `<View>` components |
+| `renderersProps` | `Record<string, object>` | `undefined` | Extra props for specific tag renderers |
+| `maxImagesWidth` | `number` | `undefined` | Maximum image width cap |
+| `imagesInitialDimensions` | `{ width, height }` | `{100, 100}` | Placeholder size before image loads |
+| `listsPrefixesRenderers` | `ListsPrefixesRenderers` | `undefined` | Custom bullet/number components |
+| `emSize` | `number` | `14` | Base em unit in pixels |
+| `systemFonts` | `string[]` | `undefined` | Available system fonts |
+| `fallbackFonts` | `Record<string, string>` | `undefined` | Map unsupported fonts to fallbacks |
+| `debug` | `boolean` | `false` | Log DOM, styles, and show red debug borders |
+| `allowDangerousHtml` | `boolean` | `false` | When false, strips dangerous tags and attributes |
+| `darkModeStyles` | `Record<string, RNStyle>` | `undefined` | Per-tag overrides applied in dark mode |
+| `colorScheme` | `'light' \| 'dark'` | system | Override color scheme detection |
+| `allowFontScaling` | `boolean` | `true` | Allow system font-size accessibility scaling |
+| `maxFontSizeMultiplier` | `number` | `undefined` | Cap the font-size multiplier |
+
+## Security
+
+By default (when `allowDangerousHtml` is `false`), the renderer automatically:
+
+- Strips `<script>`, `<iframe>`, `<object>`, `<embed>`, `<form>`, `<svg>`, `<math>` tags
+- Neutralizes `javascript:`, `vbscript:`, and `data:text/html` URLs
+- Removes all event handler attributes (`onclick`, `onerror`, `onload`, etc.)
+- Guards against prototype pollution and deeply nested DOM attacks
+
+Set `allowDangerousHtml={true}` to opt out of sanitization. See [SECURITY.md](SECURITY.md) for details.
+
+## Dark Mode
+
+The renderer automatically detects the system color scheme and applies dark-mode-aware default styles. You can add per-tag overrides:
+
+```tsx
+<HtmlRenderer
+  html={html}
+  contentWidth={width}
+  darkModeStyles={{
+    p: { color: '#ddd' },
+    pre: { backgroundColor: '#1a1a2e', color: '#eee' },
+  }}
+/>
+```
+
+Override detection with the `colorScheme` prop: `colorScheme="dark"` or `colorScheme="light"`.
+
+Use `getDefaultDarkModeStyles()` to inspect the built-in dark mode defaults.
+
+## Accessibility
+
+All interactive elements include proper accessibility attributes:
+
+- `<a>` → `accessibilityRole="link"`, `accessibilityHint="Opens {href}"`
+- `<img>` → `accessibilityRole="image"`, `accessibilityLabel` from `alt`
+- `<button>` → `accessibilityRole="button"`
+- `<h1>`–`<h6>` → `accessibilityRole="header"`
+- `<ul>`/`<ol>` → `accessibilityRole="list"`
+- `<input type="checkbox">` → `accessibilityRole="checkbox"`, `accessibilityState.checked`
+
+HTML `aria-*` attributes are mapped to React Native equivalents:
+
+```html
+<p aria-label="Custom label">Accessible paragraph</p>
+<span aria-hidden="true">Hidden from screen readers</span>
+<button aria-disabled="true">Disabled button</button>
+```
+
+| HTML attribute | React Native equivalent |
+| -------------- | ---------------------- |
+| `aria-label` | `accessibilityLabel` |
+| `aria-hidden="true"` | `accessible={false}` |
+| `aria-disabled` | `accessibilityState.disabled` |
+| `aria-checked` | `accessibilityState.checked` |
+| `aria-expanded` | `accessibilityState.expanded` |
+| `aria-busy` | `accessibilityState.busy` |
+| `aria-role` / `role` | `accessibilityRole` |
+
+## Font Scaling
+
+Respects system accessibility font-size settings:
+
+```tsx
+<HtmlRenderer
+  html={html}
+  contentWidth={width}
+  allowFontScaling={true}
+  maxFontSizeMultiplier={1.5}
+/>
+```
+
+## Supported HTML Tags
+
+### Block Elements
+
+`<div>`, `<section>`, `<article>`, `<header>`, `<footer>`, `<main>`, `<nav>`, `<aside>`, `<blockquote>`, `<pre>`, `<figure>`
+
+### Text Elements
+
+`<p>`, `<h1>`-`<h6>`, `<span>`, `<strong>`, `<b>`, `<em>`, `<i>`, `<u>`, `<s>`, `<strike>`, `<del>`, `<ins>`, `<mark>`, `<small>`, `<sub>`, `<sup>`, `<code>`, `<label>`
+
+### Media
+
+`<img>` (with auto-sizing, caching, loading state, error fallback), `<video>` and `<audio>` (placeholder views)
+
+### Lists
+
+`<ul>`, `<ol>`, `<li>` with proper bullets/numbers and nested list support
+
+### Tables
+
+`<table>`, `<thead>`, `<tbody>`, `<tfoot>`, `<tr>`, `<th>`, `<td>` wrapped in horizontal ScrollView
+
+### Links
+
+`<a>` with `onLinkPress` callback
+
+### Forms (read-only)
+
+`<input>`, `<textarea>`, `<button>`, `<select>` rendered as visual read-only elements
+
+### Self-closing
+
+`<br>`, `<hr>`
+
+### Silently Ignored
+
+`<script>`, `<style>`, `<head>`, `<meta>`, `<link>`, `<title>`, `<noscript>`
+
+### Unknown Tags
+
+Unknown tags render their children without crashing. In `debug` mode, a warning is logged.
+
+## Custom Renderers
+
+Override how any tag renders:
+
+```tsx
+import { HtmlRenderer } from 'react-native-html-renderer';
+import type { CustomRendererProps } from 'react-native-html-renderer';
+import { View } from 'react-native';
+
+function myBlockquote({ children, style }: CustomRendererProps) {
+  return (
+    <View style={{ borderLeftWidth: 4, borderLeftColor: '#3498db', paddingLeft: 12 }}>
+      {children}
+    </View>
+  );
+}
+
+<HtmlRenderer
+  html="<blockquote><p>Quoted text</p></blockquote>"
+  contentWidth={350}
+  customRenderers={{ blockquote: myBlockquote }}
+/>
+```
+
+The `CustomRendererProps` object includes:
+
+| Property | Type | Description |
+| -------- | ---- | ----------- |
+| `node` | `DOMElement` | The parsed DOM element |
+| `children` | `ReactNode[]` | Pre-rendered child nodes |
+| `style` | `RNStyle` | Merged style for the element |
+| `attributes` | `Record<string, string>` | HTML attributes |
+| `passProps` | `Record<string, unknown>` | Extra props from `renderersProps` |
+| `renderChildren` | `(nodes: DOMNode[]) => ReactNode[]` | Helper to render child DOM nodes |
+| `contentWidth` | `number` | Available content width |
+
+## Tag & Class Styles
+
+```tsx
+<HtmlRenderer
+  html='<p class="intro">Hello</p><p id="note">Note</p>'
+  contentWidth={350}
+  tagsStyles={{
+    p: { fontSize: 16, lineHeight: 24 },
+    h1: { color: '#2c3e50' },
+  }}
+  classesStyles={{
+    intro: { backgroundColor: '#f0f0f0', padding: 8 },
+  }}
+  idsStyles={{
+    note: { fontStyle: 'italic', color: '#999' },
+  }}
+/>
+```
+
+Style cascade order: **default tag style** → **tagsStyles** → **classesStyles** → **idsStyles** → **inline style**
+
+In dark mode: **default dark styles** and **darkModeStyles** are merged into the tag styles layer.
+
+## Hooks
+
+Three reusable hooks exported for use inside custom renderers or elsewhere:
+
+```tsx
+import { useHtmlParser, useContentWidth, useTagStyle } from 'react-native-html-renderer';
+
+// Parse HTML into a DOM tree
+const nodes = useHtmlParser('<p>Hello</p>');
+
+// Get contentWidth from the nearest HtmlRenderer context
+const width = useContentWidth();
+
+// Get the resolved style for a tag from context
+const pStyle = useTagStyle('p');
+```
+
+## Utility Exports
+
+```tsx
+import {
+  parseHTML,
+  parseInlineStyle,
+  getDefaultTagStyles,
+  getDefaultDarkModeStyles,
+  sanitizeDOM,
+  clearDOMCache,
+  clearImageDimensionCache,
+} from 'react-native-html-renderer';
+```
+
+| Export | Description |
+| ------ | ----------- |
+| `parseHTML(html, ignoredTags?)` | Parse an HTML string into a `DOMNode[]` tree |
+| `parseInlineStyle(css, ignored?, allowed?)` | Convert a CSS string to a React Native style object |
+| `getDefaultTagStyles(emSize)` | Get the default styles for all supported tags |
+| `getDefaultDarkModeStyles()` | Get the built-in dark mode style overrides |
+| `sanitizeDOM(nodes)` | Strip dangerous tags, attributes, and URLs from a DOM tree |
+| `clearDOMCache()` | Clear the parsed DOM LRU cache (max 50 entries) |
+| `clearImageDimensionCache()` | Clear the image dimension LRU cache (max 200 entries) |
+
+## Image Handling
+
+Images automatically:
+
+- Fetch dimensions via `Image.getSize()` for remote URLs
+- **Cache dimensions** after first fetch to avoid repeated network calls
+- Scale proportionally to fit `contentWidth`
+- Respect `maxImagesWidth` cap
+- Show a loading indicator while fetching
+- Show an error fallback if loading fails
+- Support `onImagePress` callback
+- Support `data:` base64 URIs
+
+## Error Handling
+
+The renderer handles errors at multiple levels to ensure it never crashes your app:
+
+- **Parse errors** — malformed HTML is caught during parsing; returns empty output and calls `onError`
+- **Render errors** — if a node fails to render, it is skipped (other nodes continue rendering)
+- **Custom renderer errors** — exceptions in user-provided `customRenderers` are caught per-node; the failing tag is skipped with a debug-mode console error
+- **Style errors** — invalid inline CSS is silently ignored
+- **Image errors** — failed image loads show a fallback placeholder
+- **React ErrorBoundary** — wraps the entire tree as a final safety net
+
+```tsx
+<HtmlRenderer
+  html={html}
+  contentWidth={width}
+  onError={(error) => {
+    // Log to your error tracking service
+    Sentry.captureException(error);
+  }}
+  fallback={<Text>Something went wrong.</Text>}
+/>
+```
+
+In `debug` mode, all caught errors are logged to the console with the tag name and stack trace.
+
+## Debug Mode
+
+Set `debug={true}` to enable:
+
+- Parsed DOM tree logged to console
+- Computed styles per node logged to console
+- Unknown/skipped tags logged as warnings
+- Red border drawn around every rendered node
+- Color scheme logged to console
+
+## Limitations
+
+- **Form elements are read-only** — `<input>`, `<textarea>`, `<select>`, `<button>` render as visual representations but are not interactive
+- **Video and audio are placeholders** — `<video>` and `<audio>` render placeholder views, not playable media (use custom renderers to integrate a media player)
+- **No CSS cascade beyond inline** — only inline `style` attributes, tag/class/id overrides, and default styles are supported (no external stylesheets, no `<style>` blocks)
+- **Limited CSS properties** — only properties supported by React Native's style system are converted (see `css-to-react-native` for the full list)
+- **No CSS animations or transitions**
+- **No web component support** (`<slot>`, `<template>`, shadow DOM)
+- **Tables may overflow** — wide tables are wrapped in a horizontal `ScrollView`
+
+## Migration from [react-native-render-html](https://github.com/meliorence/react-native-render-html) v6
+
+| react-native-render-html | react-native-html-renderer |
+| ------------------------ | -------------------------- |
+| `<RenderHtml source={{ html }} />` | `<HtmlRenderer html={html} contentWidth={width} />` |
+| `renderers={{ p: PRenderer }}` | `customRenderers={{ p: myPRenderer }}` |
+| `tagsStyles={{ p: { ... } }}` | `tagsStyles={{ p: { ... } }}` (same API) |
+| `classesStyles={{ ... }}` | `classesStyles={{ ... }}` (same API) |
+| `ignoredDomTags={[...]}` | `ignoredTags={[...]}` |
+| `renderersProps={{ a: { ... } }}` | `renderersProps={{ a: { ... } }}` (same API) |
+| `systemFonts={[...]}` | `systemFonts={[...]}` (same API) |
+| `defaultTextProps={{ ... }}` | `defaultTextProps={{ ... }}` (same API) |
+| *(no equivalent)* | `allowDangerousHtml` — built-in XSS sanitization |
+| *(no equivalent)* | `darkModeStyles` — automatic dark mode support |
+| *(no equivalent)* | `allowFontScaling` / `maxFontSizeMultiplier` |
+
+## Contributing
+
+See the [contributing guide](CONTRIBUTING.md) for development workflow and pull request instructions.
+
+## License
+
+MIT
+
+---
+
+Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)

package/lib/module/HtmlRenderer.js

@@ -0,0 +1,183 @@
+"use strict";
+
+import { useMemo } from 'react';
+import { View, useColorScheme } from 'react-native';
+import { HtmlRendererContext } from "./context/index.js";
+import { parseHTML } from "./parser/index.js";
+import { getDefaultDarkModeStyles } from "./styles/darkModeStyles.js";
+import { renderNodes } from "./renderer/index.js";
+import { ErrorBoundary } from "./renderer/ErrorBoundary.js";
+import { sanitizeDOM } from "./utils/sanitize.js";
+import { getCachedDOM, setCachedDOM, buildDOMCacheKey } from "./utils/cache.js";
+
+/**
+ * Renders an HTML string into native React Native components.
+ *
+ * @example
+ * ```tsx
+ * <HtmlRenderer
+ *   html="<h1>Hello</h1><p>World</p>"
+ *   contentWidth={350}
+ *   onLinkPress={(href) => Linking.openURL(href)}
+ * />
+ * ```
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export function HtmlRenderer({
+  html,
+  contentWidth,
+  baseStyle,
+  tagsStyles,
+  classesStyles,
+  idsStyles,
+  customRenderers,
+  onLinkPress,
+  onImagePress,
+  onError,
+  fallback,
+  ignoredTags,
+  ignoredStyles,
+  allowedStyles,
+  defaultTextProps,
+  defaultViewProps,
+  renderersProps,
+  maxImagesWidth,
+  imagesInitialDimensions,
+  listsPrefixesRenderers,
+  emSize = 14,
+  systemFonts,
+  fallbackFonts,
+  debug = false,
+  allowDangerousHtml = false,
+  darkModeStyles,
+  colorScheme: colorSchemeProp,
+  allowFontScaling = true,
+  maxFontSizeMultiplier
+}) {
+  // --- Color scheme ---
+  const systemScheme = useColorScheme();
+  const resolvedScheme = colorSchemeProp ?? systemScheme;
+  const isDark = resolvedScheme === 'dark';
+
+  // --- Memoize set conversions ---
+  const ignoredTagsSet = useMemo(() => new Set(ignoredTags ?? []), [ignoredTags]);
+  const ignoredStylesSet = useMemo(() => new Set(ignoredStyles ?? []), [ignoredStyles]);
+  const allowedStylesSet = useMemo(() => allowedStyles ? new Set(allowedStyles) : null, [allowedStyles]);
+
+  // --- Parse DOM (with cache, key includes sanitization params to prevent poisoning) ---
+  const nodes = useMemo(() => {
+    try {
+      const cacheKey = buildDOMCacheKey(html, allowDangerousHtml, ignoredTagsSet);
+      const cached = getCachedDOM(cacheKey);
+      if (cached) return cached;
+      let parsed = parseHTML(html, ignoredTagsSet);
+
+      // Sanitize if not explicitly opted out
+      if (!allowDangerousHtml) {
+        parsed = sanitizeDOM(parsed);
+      }
+      setCachedDOM(cacheKey, parsed);
+      return parsed;
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error('Failed to parse HTML');
+      if (debug) {
+        console.error('[HtmlRenderer] Parse error:', error);
+      }
+      onError?.(error);
+      return [];
+    }
+  }, [html, ignoredTagsSet, allowDangerousHtml, debug, onError]);
+
+  // --- Merge dark mode styles ---
+  const effectiveTagsStyles = useMemo(() => {
+    const base = tagsStyles ?? {};
+    if (!isDark) return base;
+    const defaultDark = getDefaultDarkModeStyles();
+    const userDark = darkModeStyles ?? {};
+
+    // Merge: base tagsStyles + default dark overrides + user dark overrides
+    const merged = {
+      ...base
+    };
+    for (const tag of Object.keys(defaultDark)) {
+      merged[tag] = {
+        ...(merged[tag] ?? {}),
+        ...defaultDark[tag]
+      };
+    }
+    for (const tag of Object.keys(userDark)) {
+      merged[tag] = {
+        ...(merged[tag] ?? {}),
+        ...userDark[tag]
+      };
+    }
+    return merged;
+  }, [tagsStyles, isDark, darkModeStyles]);
+
+  // --- Build context value ---
+  const ctx = useMemo(() => ({
+    contentWidth,
+    tagsStyles: effectiveTagsStyles,
+    classesStyles: classesStyles ?? {},
+    idsStyles: idsStyles ?? {},
+    customRenderers: customRenderers ?? {},
+    onLinkPress,
+    onImagePress,
+    renderersProps: renderersProps ?? {},
+    emSize,
+    debug,
+    ignoredTags: ignoredTagsSet,
+    ignoredStyles: ignoredStylesSet,
+    allowedStyles: allowedStylesSet,
+    defaultTextProps,
+    defaultViewProps,
+    maxImagesWidth,
+    imagesInitialDimensions: imagesInitialDimensions ?? {
+      width: 100,
+      height: 100
+    },
+    listsPrefixesRenderers,
+    systemFonts,
+    fallbackFonts,
+    nestLevel: 0,
+    colorScheme: resolvedScheme,
+    darkModeStyles: darkModeStyles ?? {},
+    allowFontScaling,
+    maxFontSizeMultiplier
+  }), [contentWidth, effectiveTagsStyles, classesStyles, idsStyles, customRenderers, onLinkPress, onImagePress, renderersProps, emSize, debug, ignoredTagsSet, ignoredStylesSet, allowedStylesSet, defaultTextProps, defaultViewProps, maxImagesWidth, imagesInitialDimensions, listsPrefixesRenderers, systemFonts, fallbackFonts, resolvedScheme, darkModeStyles, allowFontScaling, maxFontSizeMultiplier]);
+
+  // --- Debug log ---
+  if (debug) {
+    console.log('[HtmlRenderer] Parsed DOM:', JSON.stringify(nodes, null, 2));
+    console.log('[HtmlRenderer] Color scheme:', resolvedScheme);
+  }
+
+  // --- Render ---
+  const rendered = useMemo(() => {
+    try {
+      return renderNodes(nodes, ctx, 'rn');
+    } catch (e) {
+      const error = e instanceof Error ? e : new Error('Failed to render HTML');
+      if (debug) {
+        console.error('[HtmlRenderer] Render error:', error);
+      }
+      onError?.(error);
+      return [];
+    }
+  }, [nodes, ctx, debug, onError]);
+  return /*#__PURE__*/_jsx(ErrorBoundary, {
+    onError: onError,
+    fallback: fallback,
+    children: /*#__PURE__*/_jsx(HtmlRendererContext.Provider, {
+      value: ctx,
+      children: /*#__PURE__*/_jsx(View, {
+        style: [containerStyle, baseStyle],
+        children: rendered
+      })
+    })
+  });
+}
+const containerStyle = {
+  flexShrink: 1
+};
+//# sourceMappingURL=HtmlRenderer.js.map

package/lib/module/HtmlRenderer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useMemo","View","useColorScheme","HtmlRendererContext","parseHTML","getDefaultDarkModeStyles","renderNodes","ErrorBoundary","sanitizeDOM","getCachedDOM","setCachedDOM","buildDOMCacheKey","jsx","_jsx","HtmlRenderer","html","contentWidth","baseStyle","tagsStyles","classesStyles","idsStyles","customRenderers","onLinkPress","onImagePress","onError","fallback","ignoredTags","ignoredStyles","allowedStyles","defaultTextProps","defaultViewProps","renderersProps","maxImagesWidth","imagesInitialDimensions","listsPrefixesRenderers","emSize","systemFonts","fallbackFonts","debug","allowDangerousHtml","darkModeStyles","colorScheme","colorSchemeProp","allowFontScaling","maxFontSizeMultiplier","systemScheme","resolvedScheme","isDark","ignoredTagsSet","Set","ignoredStylesSet","allowedStylesSet","nodes","cacheKey","cached","parsed","e","error","Error","console","effectiveTagsStyles","base","defaultDark","userDark","merged","tag","Object","keys","ctx","width","height","nestLevel","log","JSON","stringify","rendered","children","Provider","value","style","containerStyle","flexShrink"],"sourceRoot":"../../src","sources":["HtmlRenderer.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/context/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+import { createContext, useContext } from 'react';
+const DEFAULT_CONTEXT = {
+  contentWidth: 300,
+  tagsStyles: {},
+  classesStyles: {},
+  idsStyles: {},
+  customRenderers: {},
+  renderersProps: {},
+  emSize: 14,
+  debug: false,
+  ignoredTags: new Set(),
+  ignoredStyles: new Set(),
+  allowedStyles: null,
+  imagesInitialDimensions: {
+    width: 100,
+    height: 100
+  },
+  nestLevel: 0,
+  colorScheme: 'light',
+  darkModeStyles: {},
+  allowFontScaling: true,
+  maxFontSizeMultiplier: undefined
+};
+export const HtmlRendererContext = /*#__PURE__*/createContext(DEFAULT_CONTEXT);
+
+/** Access the HtmlRenderer context from inside the render tree. */
+export function useHtmlRendererContext() {
+  return useContext(HtmlRendererContext);
+}
+//# sourceMappingURL=index.js.map

package/lib/module/context/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["createContext","useContext","DEFAULT_CONTEXT","contentWidth","tagsStyles","classesStyles","idsStyles","customRenderers","renderersProps","emSize","debug","ignoredTags","Set","ignoredStyles","allowedStyles","imagesInitialDimensions","width","height","nestLevel","colorScheme","darkModeStyles","allowFontScaling","maxFontSizeMultiplier","undefined","HtmlRendererContext","useHtmlRendererContext"],"sourceRoot":"../../../src","sources":["context/index.tsx"],"mappings":";;AAAA,SAASA,aAAa,EAAEC,UAAU,QAAQ,OAAO;AAGjD,MAAMC,eAAyC,GAAG;EAChDC,YAAY,EAAE,GAAG;EACjBC,UAAU,EAAE,CAAC,CAAC;EACdC,aAAa,EAAE,CAAC,CAAC;EACjBC,SAAS,EAAE,CAAC,CAAC;EACbC,eAAe,EAAE,CAAC,CAAC;EACnBC,cAAc,EAAE,CAAC,CAAC;EAClBC,MAAM,EAAE,EAAE;EACVC,KAAK,EAAE,KAAK;EACZC,WAAW,EAAE,IAAIC,GAAG,CAAC,CAAC;EACtBC,aAAa,EAAE,IAAID,GAAG,CAAC,CAAC;EACxBE,aAAa,EAAE,IAAI;EACnBC,uBAAuB,EAAE;IAAEC,KAAK,EAAE,GAAG;IAAEC,MAAM,EAAE;EAAI,CAAC;EACpDC,SAAS,EAAE,CAAC;EACZC,WAAW,EAAE,OAAO;EACpBC,cAAc,EAAE,CAAC,CAAC;EAClBC,gBAAgB,EAAE,IAAI;EACtBC,qBAAqB,EAAEC;AACzB,CAAC;AAED,OAAO,MAAMC,mBAAmB,gBAC9BxB,aAAa,CAA2BE,eAAe,CAAC;;AAE1D;AACA,OAAO,SAASuB,sBAAsBA,CAAA,EAA6B;EACjE,OAAOxB,UAAU,CAACuB,mBAAmB,CAAC;AACxC","ignoreList":[]}

package/lib/module/hooks/index.js

@@ -0,0 +1,6 @@
+"use strict";
+
+export { useHtmlParser } from "./useHtmlParser.js";
+export { useContentWidth } from "./useContentWidth.js";
+export { useTagStyle } from "./useTagStyle.js";
+//# sourceMappingURL=index.js.map

package/lib/module/hooks/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useHtmlParser","useContentWidth","useTagStyle"],"sourceRoot":"../../../src","sources":["hooks/index.ts"],"mappings":";;AAAA,SAASA,aAAa,QAAQ,oBAAiB;AAC/C,SAASC,eAAe,QAAQ,sBAAmB;AACnD,SAASC,WAAW,QAAQ,kBAAe","ignoreList":[]}

package/lib/module/hooks/useContentWidth.js

@@ -0,0 +1,12 @@
+"use strict";
+
+import { useHtmlRendererContext } from "../context/index.js";
+
+/**
+ * Returns the current `contentWidth` from the HtmlRenderer context.
+ * Useful inside custom renderers that need to know the available layout width.
+ */
+export function useContentWidth() {
+  return useHtmlRendererContext().contentWidth;
+}
+//# sourceMappingURL=useContentWidth.js.map