@neeleshyadav/react-native-html-renderer 1.1.0

package/src/HtmlRenderer.tsx

@@ -0,0 +1,216 @@
+import { useMemo } from 'react';
+import { View, useColorScheme } from 'react-native';
+import type {
+  HtmlRendererProps,
+  HtmlRendererContextValue,
+  TagsStyles,
+} from './types';
+import { HtmlRendererContext } from './context';
+import { parseHTML } from './parser';
+import { getDefaultDarkModeStyles } from './styles/darkModeStyles';
+import { renderNodes } from './renderer';
+import { ErrorBoundary } from './renderer/ErrorBoundary';
+import { sanitizeDOM } from './utils/sanitize';
+import { getCachedDOM, setCachedDOM, buildDOMCacheKey } from './utils/cache';
+
+/**
+ * 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)}
+ * />
+ * ```
+ */
+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,
+}: HtmlRendererProps) {
+  // --- 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: TagsStyles = 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: TagsStyles = { ...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: HtmlRendererContextValue = 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 (
+    <ErrorBoundary onError={onError} fallback={fallback}>
+      <HtmlRendererContext.Provider value={ctx}>
+        <View style={[containerStyle, baseStyle]}>{rendered}</View>
+      </HtmlRendererContext.Provider>
+    </ErrorBoundary>
+  );
+}
+
+const containerStyle = { flexShrink: 1 as const };

package/src/context/index.tsx

@@ -0,0 +1,30 @@
+import { createContext, useContext } from 'react';
+import type { HtmlRendererContextValue } from '../types';
+
+const DEFAULT_CONTEXT: HtmlRendererContextValue = {
+  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 =
+  createContext<HtmlRendererContextValue>(DEFAULT_CONTEXT);
+
+/** Access the HtmlRenderer context from inside the render tree. */
+export function useHtmlRendererContext(): HtmlRendererContextValue {
+  return useContext(HtmlRendererContext);
+}

package/src/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useHtmlParser } from './useHtmlParser';
+export { useContentWidth } from './useContentWidth';
+export { useTagStyle } from './useTagStyle';

package/src/hooks/useContentWidth.ts

@@ -0,0 +1,9 @@
+import { useHtmlRendererContext } from '../context';
+
+/**
+ * Returns the current `contentWidth` from the HtmlRenderer context.
+ * Useful inside custom renderers that need to know the available layout width.
+ */
+export function useContentWidth(): number {
+  return useHtmlRendererContext().contentWidth;
+}

package/src/hooks/useHtmlParser.ts

@@ -0,0 +1,18 @@
+import { useMemo } from 'react';
+import { parseHTML } from '../parser';
+import type { DOMNode } from '../types';
+
+/**
+ * Hook that parses an HTML string into a DOM tree.
+ * The result is memoized and only recomputed when `html` or `ignoredTags` change.
+ *
+ * @param html - Raw HTML string.
+ * @param ignoredTags - Optional set of tag names to skip.
+ * @returns Array of parsed DOMNode objects.
+ */
+export function useHtmlParser(
+  html: string,
+  ignoredTags?: Set<string>
+): DOMNode[] {
+  return useMemo(() => parseHTML(html, ignoredTags), [html, ignoredTags]);
+}

package/src/hooks/useTagStyle.ts

@@ -0,0 +1,23 @@
+import { useMemo } from 'react';
+import { useHtmlRendererContext } from '../context';
+import { getDefaultTagStyles } from '../styles';
+import type { RNStyle } from '../types';
+
+/**
+ * Returns the fully merged style for a given HTML tag, combining:
+ * default tag styles → user `tagsStyles` override.
+ *
+ * Useful inside custom renderers that want access to the computed base style.
+ *
+ * @param tag - The HTML tag name (e.g. `'p'`, `'h1'`).
+ */
+export function useTagStyle(tag: string): RNStyle {
+  const ctx = useHtmlRendererContext();
+
+  return useMemo(() => {
+    const defaults = getDefaultTagStyles(ctx.emSize);
+    const base = defaults[tag] ?? {};
+    const override = ctx.tagsStyles[tag] ?? {};
+    return { ...base, ...override } as RNStyle;
+  }, [tag, ctx.emSize, ctx.tagsStyles]);
+}

package/src/index.tsx

@@ -0,0 +1,39 @@
+// Main component
+export { HtmlRenderer } from './HtmlRenderer';
+
+// Parser
+export { parseHTML } from './parser';
+
+// Styles
+export {
+  parseInlineStyle,
+  getDefaultTagStyles,
+  getDefaultDarkModeStyles,
+} from './styles';
+
+// Hooks
+export { useHtmlParser, useContentWidth, useTagStyle } from './hooks';
+
+// Context (for advanced use inside custom renderers)
+export { useHtmlRendererContext } from './context';
+
+// Utilities
+export { sanitizeDOM } from './utils/sanitize';
+export { clearImageDimensionCache, clearDOMCache } from './utils/cache';
+
+// Types
+export type {
+  HtmlRendererProps,
+  DOMNode,
+  DOMElement,
+  DOMText,
+  RNStyle,
+  CustomRenderer,
+  CustomRendererProps,
+  TagsStyles,
+  ClassesStyles,
+  IdsStyles,
+  HtmlRendererContextValue,
+  ListPrefixRendererProps,
+  ListsPrefixesRenderers,
+} from './types';

package/src/parser/index.ts

@@ -0,0 +1,80 @@
+import { parseDocument } from 'htmlparser2';
+import type { DOMNode, DOMElement, DOMText } from '../types';
+
+// ---------------------------------------------------------------------------
+// Internal htmlparser2 node shape (loosely typed to avoid coupling)
+// ---------------------------------------------------------------------------
+
+interface HP2Node {
+  type: string;
+  name?: string;
+  data?: string;
+  attribs?: Record<string, string>;
+  children?: HP2Node[];
+}
+
+// Tags whose content should never appear in the rendered output.
+const IGNORED_TAGS = new Set(['script', 'style', 'head', 'meta', 'link']);
+
+/** Max depth to prevent stack overflow from deeply nested HTML. */
+const MAX_DEPTH = 100;
+
+function convertNode(
+  node: HP2Node,
+  ignoredTags: Set<string>,
+  depth: number
+): DOMNode | null {
+  if (depth > MAX_DEPTH) return null;
+
+  if (node.type === 'text') {
+    const data = node.data ?? '';
+    if (data.trim().length === 0) return null;
+    return { type: 'text', data } satisfies DOMText;
+  }
+
+  if (node.type === 'tag' || node.type === 'script' || node.type === 'style') {
+    const tag = (node.name ?? '').toLowerCase();
+
+    // Skip built-in ignored tags AND user-supplied ignored tags
+    if (IGNORED_TAGS.has(tag) || ignoredTags.has(tag)) {
+      return null;
+    }
+
+    const children: DOMNode[] = [];
+    for (const child of node.children ?? []) {
+      const converted = convertNode(child, ignoredTags, depth + 1);
+      if (converted) children.push(converted);
+    }
+
+    return {
+      type: 'element',
+      tag,
+      attributes: node.attribs ?? {},
+      children,
+    } satisfies DOMElement;
+  }
+
+  return null;
+}
+
+/**
+ * Parse an HTML string into an array of `DOMNode` objects.
+ *
+ * @param html - Raw HTML string.
+ * @param ignoredTags - Optional set of tag names to skip entirely.
+ * @returns Array of parsed DOM nodes.
+ */
+export function parseHTML(
+  html: string,
+  ignoredTags: Set<string> = new Set()
+): DOMNode[] {
+  const doc = parseDocument(html);
+  const nodes: DOMNode[] = [];
+
+  for (const child of (doc.children ?? []) as HP2Node[]) {
+    const converted = convertNode(child, ignoredTags, 0);
+    if (converted) nodes.push(converted);
+  }
+
+  return nodes;
+}

package/src/renderer/ErrorBoundary.tsx

@@ -0,0 +1,80 @@
+import { Component, type ReactNode, type ErrorInfo } from 'react';
+import { View, Text, type ViewStyle, type TextStyle } from 'react-native';
+
+interface ErrorBoundaryProps {
+  onError?: (error: Error) => void;
+  fallback?: ReactNode;
+  children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | null;
+}
+
+/**
+ * Catches rendering errors in the HTML renderer tree and
+ * displays a fallback UI instead of crashing the host app.
+ */
+export class ErrorBoundary extends Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = { hasError: false, error: null };
+  }
+
+  static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+    return { hasError: true, error };
+  }
+
+  override componentDidCatch(error: Error, info: ErrorInfo): void {
+    if (__DEV__) {
+      console.error(
+        '[HtmlRenderer] Render error caught by ErrorBoundary:',
+        error,
+        info.componentStack
+      );
+    }
+    this.props.onError?.(error);
+  }
+
+  override render(): ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback !== undefined) {
+        return this.props.fallback;
+      }
+
+      return (
+        <View style={fallbackContainer}>
+          <Text style={fallbackTitle}>Unable to render HTML content</Text>
+          {__DEV__ && this.state.error && (
+            <Text style={fallbackDetail}>{this.state.error.message}</Text>
+          )}
+        </View>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+const fallbackContainer: ViewStyle = {
+  padding: 16,
+  backgroundColor: '#fef2f2',
+  borderRadius: 8,
+  borderWidth: 1,
+  borderColor: '#fecaca',
+};
+
+const fallbackTitle: TextStyle = {
+  color: '#991b1b',
+  fontSize: 14,
+  fontWeight: '600',
+};
+
+const fallbackDetail: TextStyle = {
+  color: '#b91c1c',
+  fontSize: 12,
+  marginTop: 4,
+};