@nanogiants/react-native-render-html 1.0.0

package/src/renderers/ImgTagRenderer.tsx

@@ -0,0 +1,64 @@
+import type { Element } from 'domhandler';
+import { type FunctionComponent, useEffect, useState } from 'react';
+import { Image, type ImageStyle, View } from 'react-native';
+
+import { useHtmlContext } from '../context/HtmlProvider';
+
+interface Props {
+  node: Element;
+}
+
+export const ImgTagRenderer: FunctionComponent<Props> = ({ node }) => {
+  const { getStyle, renderImage } = useHtmlContext();
+  const [size, setSize] = useState<{
+    w: number;
+    h: number;
+  } | null>(null);
+  const [containerWidth, setContainerWidth] = useState<number>(0);
+
+  const { src, alt } = node.attribs || {};
+
+  useEffect(() => {
+    if (!src) {
+      return;
+    }
+    Image.getSize(
+      src,
+      (width, height) => {
+        setSize({ w: width, h: height });
+      },
+      () => {
+        // ignore errors — image simply won't render
+      },
+    );
+  }, [src]);
+
+  if (!size) return null;
+
+  const { w, h } = size;
+
+  const finalWidth = Math.min(w, containerWidth);
+  const ratio = h / w;
+
+  const imageStyle = {
+    ...(getStyle(node).block as ImageStyle),
+    width: finalWidth,
+    height: finalWidth * ratio,
+  };
+
+  return (
+    <View
+      onLayout={(e) => {
+        const width = e.nativeEvent.layout.width;
+        setContainerWidth(width);
+      }}
+      style={{ width: '100%' }}
+    >
+      {renderImage({
+        source: { uri: src },
+        style: imageStyle,
+        alt,
+      })}
+    </View>
+  );
+};

package/src/renderers/LiTagRenderer.tsx

@@ -0,0 +1,73 @@
+import type { Element } from 'domhandler';
+import type { FunctionComponent } from 'react';
+import { View } from 'react-native';
+
+import { UL_MARKER_URI } from '../assets';
+import { useHtmlContext } from '../context/HtmlProvider';
+import { concatTextNodes, isList } from '../utils';
+import { NodesRenderer } from './_NodesRenderer';
+
+interface Props {
+  node: Element;
+}
+
+export const LiTagRenderer: FunctionComponent<Props> = ({ node }) => {
+  const { getStyle, markerColor, renderImage, renderText } = useHtmlContext();
+
+  const isParentOl = node.parent?.type === 'tag' && node.parent?.tagName === 'ol';
+  const parentLiTags = node.parent?.children || [];
+  const currentIndex = parentLiTags.indexOf(node) + 1;
+  const items = node.children;
+  const style = getStyle(node);
+  const { lineHeight = 20, fontSize = 16 } = style.text;
+  const markerHeight = 5;
+  const markerColorResult = markerColor ?? style.text.color ?? 'pink';
+  const renderMarker = () => {
+    if (isParentOl) {
+      return renderText({ style: [style.text], children: `${currentIndex}.` });
+    } else {
+      return renderImage({
+        source: { uri: UL_MARKER_URI },
+        style: {
+          width: markerHeight,
+          height: lineHeight,
+          tintColor: markerColorResult,
+        },
+      });
+    }
+  };
+
+  // Separate nested lists and main content
+  const nestedLists = items.filter((child) => isList(child));
+  const mainContent = items.filter((child) => !isList(child));
+
+  return (
+    <View>
+      <View
+        style={{
+          flexDirection: 'row',
+        }}
+      >
+        <View
+          style={{
+            marginRight: 8,
+            marginBottom: lineHeight - fontSize,
+          }}
+        >
+          {renderMarker()}
+        </View>
+        {renderText({
+          accessible: true,
+          accessibilityLabel: `List item ${currentIndex} of ${parentLiTags.length}: ${concatTextNodes(mainContent)}`,
+          style: [style.text, { flex: 1 }],
+          children: <NodesRenderer nodes={mainContent} />,
+        })}
+      </View>
+      {nestedLists.length > 0 && (
+        <View style={{ width: '100%' }}>
+          <NodesRenderer nodes={nestedLists} />
+        </View>
+      )}
+    </View>
+  );
+};

package/src/renderers/PTagRenderer.tsx

@@ -0,0 +1,31 @@
+import type { Element } from 'domhandler';
+import type { FunctionComponent } from 'react';
+
+import { useHtmlContext } from '../context/HtmlProvider';
+import { DefaultBlockRenderer } from './_DefaultBlockRenderer';
+
+interface Props {
+  node: Element;
+}
+
+export const PTagRenderer: FunctionComponent<Props> = ({ node }) => {
+  const { getStyle } = useHtmlContext();
+
+  const isFirstChild = !node.previousSibling;
+  const isLastChild = !node.nextSibling;
+  const style = getStyle(node);
+  // collapse top margin for first child and bottom margin for last child
+  const marginTop = isFirstChild ? 0 : style.block.marginTop;
+  const marginBottom = isLastChild ? 0 : style.block.marginBottom;
+  return (
+    <DefaultBlockRenderer
+      node={node}
+      viewProps={{
+        style: {
+          marginTop,
+          marginBottom,
+        },
+      }}
+    />
+  );
+};

package/src/renderers/_DefaultBlockRenderer.tsx

@@ -0,0 +1,82 @@
+import type { ChildNode, Element } from 'domhandler';
+import type { FunctionComponent } from 'react';
+import { Text, type TextProps, View, type ViewProps } from 'react-native';
+
+import { useHtmlContext } from '../context/HtmlProvider';
+import { type HTMLTag, type RendererType, rendererTypeMap } from '../types';
+import { NodesRenderer } from './_NodesRenderer';
+
+interface Props {
+  node: Element;
+  viewProps?: ViewProps;
+  textProps?: TextProps;
+}
+
+export const DefaultBlockRenderer: FunctionComponent<Props> = ({
+  node,
+  viewProps = {},
+  textProps = {},
+}) => {
+  const { getStyle } = useHtmlContext();
+  const { style: viewStyle, ...restViewProps } = viewProps;
+  const { style: textStyle, ...restTextProps } = textProps;
+
+  const groupedChildren = groupByInlineBlock(node.children);
+
+  return (
+    <View {...restViewProps} style={[getStyle(node).block, viewStyle]}>
+      {groupedChildren.map((childrenGroup, index) => {
+        if (childrenGroup.type === 'text') {
+          return (
+            <Text
+              {...restTextProps}
+              key={`${node.type}-${index}`}
+              style={[getStyle(node).text, textStyle]}
+            >
+              <NodesRenderer nodes={childrenGroup.nodes} />
+            </Text>
+          );
+        }
+        return <NodesRenderer key={`${node.type}-${index}`} nodes={childrenGroup.nodes} />;
+      })}
+    </View>
+  );
+};
+
+function groupByInlineBlock(arr: ChildNode[]): {
+  type: RendererType;
+  nodes: ChildNode[];
+}[] {
+  const result: {
+    type: RendererType;
+    nodes: ChildNode[];
+  }[] = [];
+  let currentGroup: ChildNode[] = [];
+
+  for (const item of arr) {
+    const isTextNode = item.type === 'text';
+    const isTextTag = item.type === 'tag' && rendererTypeMap[item.name as HTMLTag] === 'text';
+    if (isTextNode || isTextTag) {
+      currentGroup.push(item);
+    } else {
+      if (currentGroup.length) {
+        result.push({
+          type: 'text',
+          nodes: currentGroup,
+        });
+        currentGroup = [];
+      }
+      result.push({
+        type: 'block',
+        nodes: [item],
+      });
+    }
+  }
+  if (currentGroup.length) {
+    result.push({
+      type: 'text',
+      nodes: currentGroup,
+    });
+  }
+  return result;
+}

package/src/renderers/_DefaultTextRenderer.tsx

@@ -0,0 +1,26 @@
+import type { Element } from 'domhandler';
+import type { FunctionComponent } from 'react';
+import { type TextProps } from 'react-native';
+
+import { useHtmlContext } from '../context/HtmlProvider';
+import { NodesRenderer } from './_NodesRenderer';
+
+interface Props {
+  node: Element;
+  textProps?: TextProps;
+}
+
+export const DefaultTextRenderer: FunctionComponent<Props> = ({ node, textProps = {} }) => {
+  const { style, ...restProps } = textProps;
+  const { getStyle, renderText } = useHtmlContext();
+
+  return (
+    <>
+      {renderText({
+        ...restProps,
+        style: [getStyle(node).text, style],
+        children: <NodesRenderer nodes={node.children} />,
+      })}
+    </>
+  );
+};

package/src/renderers/_NodeRenderer.tsx

@@ -0,0 +1,119 @@
+import type { AnyNode, ChildNode } from 'domhandler';
+import type { FunctionComponent } from 'react';
+import { Text, View } from 'react-native';
+
+import { AlignedWidthItem } from '../context/AlignedWidthItem';
+import { AlignedWidthProvider } from '../context/AlignedWidthProvider';
+import { useHtmlContext } from '../context/HtmlProvider';
+import { isTextRenderer } from '../utils';
+import { DefaultBlockRenderer } from './_DefaultBlockRenderer';
+import { DefaultTextRenderer } from './_DefaultTextRenderer';
+import { ATagRenderer } from './ATagRenderer';
+import { ImgTagRenderer } from './ImgTagRenderer';
+import { LiTagRenderer } from './LiTagRenderer';
+import { PTagRenderer } from './PTagRenderer';
+
+interface Props {
+  node: AnyNode | ChildNode;
+}
+
+export const NodeRenderer: FunctionComponent<Props> = ({ node }) => {
+  const { getStyle } = useHtmlContext();
+
+  if (node.type === 'tag') {
+    switch (node.tagName) {
+      case 'thead':
+      case 'tbody':
+      case 'tfoot':
+      case 'blockquote':
+      case 'ul':
+      case 'ol':
+      case 'dl':
+      case 'dt':
+      case 'dd':
+      case 'div':
+      case 'main':
+      case 'section':
+      case 'article':
+      case 'aside':
+      case 'nav':
+      case 'header':
+      case 'footer':
+      case 'tr':
+        return <DefaultBlockRenderer node={node} />;
+      case 'h1':
+      case 'h2':
+      case 'h3':
+      case 'h4':
+      case 'h5':
+      case 'h6':
+        return (
+          <DefaultBlockRenderer
+            node={node}
+            textProps={{
+              accessible: true,
+              accessibilityRole: 'header',
+            }}
+          />
+        );
+      case 'p':
+        return <PTagRenderer node={node} />;
+      case 'li':
+        return <LiTagRenderer node={node} />;
+      case 'hr':
+        return <View style={[getStyle(node).block]} />;
+      case 'br':
+        if (isTextRenderer(node.prev)) {
+          return null;
+        }
+        return <View style={[getStyle(node).block]} />;
+      case 'table':
+        return (
+          <AlignedWidthProvider>
+            <DefaultBlockRenderer node={node} />
+          </AlignedWidthProvider>
+        );
+      case 'img':
+        return <ImgTagRenderer node={node} />;
+      // text renderers
+      case 'b':
+      case 'strong':
+      case 'i':
+      case 'em':
+      case 'u':
+      case 'mark':
+      case 'small':
+      case 's':
+      case 'del':
+      case 'sup':
+      case 'sub':
+      case 'span':
+      case 'pre':
+      case 'code':
+        return <DefaultTextRenderer node={node} />;
+      case 'a':
+        return <ATagRenderer node={node} />;
+      case 'th':
+      case 'td': {
+        const currentIndex = node.parent?.children.indexOf(node) || 0;
+        return (
+          <AlignedWidthItem index={currentIndex}>
+            <DefaultTextRenderer node={node} />
+          </AlignedWidthItem>
+        );
+      }
+      default:
+        // Ignore unsupported tags (script, style, iframe, etc.)
+        return null;
+    }
+  }
+  if (node.type === 'text') {
+    const text = node.data
+      // crush multiple spaces into one
+      .replace(/\s+/g, ' ')
+      .replace(/&nbsp;/g, ' ');
+
+    return <Text>{text}</Text>;
+  }
+  return null;
+};

package/src/renderers/_NodesRenderer.tsx

@@ -0,0 +1,12 @@
+import type { AnyNode, ChildNode } from 'domhandler';
+import type { FunctionComponent } from 'react';
+
+import { NodeRenderer } from './_NodeRenderer';
+
+interface Props {
+  nodes: (AnyNode | ChildNode)[];
+}
+
+export const NodesRenderer: FunctionComponent<Props> = ({ nodes }) => {
+  return nodes.map((node, index) => <NodeRenderer key={`${node.type}-${index}`} node={node} />);
+};

package/src/types.ts

@@ -0,0 +1,162 @@
+import { ComponentType, ReactNode } from 'react';
+import type { ColorValue, ImageProps, TextProps, TextStyle, ViewStyle } from 'react-native';
+
+import { OnHTMLLinkPress } from './context/HtmlProvider';
+
+export type HTMLTag =
+  | 'h1'
+  | 'h2'
+  | 'h3'
+  | 'h4'
+  | 'h5'
+  | 'h6'
+  | 'p'
+  | 'a'
+  | 'ul'
+  | 'ol'
+  | 'li'
+  | 'img'
+  | 'table'
+  | 'tr'
+  | 'th'
+  | 'td'
+  | 'pre'
+  | 'code'
+  | 'blockquote'
+  | 'hr'
+  | 'br'
+  | 'div'
+  | 'b'
+  | 'strong'
+  | 'i'
+  | 'em'
+  | 'u'
+  | 'mark'
+  | 'small'
+  | 's'
+  | 'del'
+  | 'sup'
+  | 'sub'
+  | 'span'
+  | 'dt'
+  | 'dd'
+  | 'thead'
+  | 'tbody'
+  | 'tfoot'
+  | 'dl'
+  | 'main'
+  | 'section'
+  | 'article'
+  | 'aside'
+  | 'nav'
+  | 'header'
+  | 'footer';
+
+export type RendererType = 'text' | 'block';
+
+export const rendererTypeMap = {
+  // Elements rendered with a View (block)
+  thead: 'block',
+  tbody: 'block',
+  tfoot: 'block',
+  blockquote: 'block',
+  ul: 'block',
+  ol: 'block',
+  dl: 'block',
+  li: 'block',
+  div: 'block',
+  hr: 'block',
+  br: 'block',
+  pre: 'block',
+  code: 'block',
+  img: 'block',
+  table: 'block',
+  tr: 'block',
+  dt: 'block',
+  dd: 'block',
+  p: 'block',
+  h1: 'block',
+  h2: 'block',
+  h3: 'block',
+  h4: 'block',
+  h5: 'block',
+  h6: 'block',
+  main: 'block',
+  section: 'block',
+  article: 'block',
+  aside: 'block',
+  nav: 'block',
+  header: 'block',
+  footer: 'block',
+
+  // All other elements are text
+  b: 'text',
+  strong: 'text',
+  i: 'text',
+  em: 'text',
+  u: 'text',
+  mark: 'text',
+  small: 'text',
+  s: 'text',
+  del: 'text',
+  sup: 'text',
+  sub: 'text',
+  span: 'text',
+  a: 'text',
+  th: 'text',
+  td: 'text',
+} satisfies Record<HTMLTag, RendererType>;
+
+export type HtmlStyle = {
+  text?: TextStyle;
+  block?: ViewStyle;
+};
+
+export type TagStyles = {
+  [key in HTMLTag]: HtmlStyle;
+};
+
+export interface CommonProps {
+  /**
+   * Render prop for all images rendered by the HTML renderer
+   * (<img> tags, bullet markers, and external link icons).
+   * Keeps the package free of any specific image library dependency.
+   *
+   * @example
+   * renderImage={(props) => <Image {...props} />}
+   */
+  renderImage?: (props: ImageProps) => ReactNode;
+
+  /**
+   * Custom component to use instead of the built-in React Native `Text`.
+   * Useful for applying a global font or integrating a design-system text component.
+   * Must accept the same props as `Text` (i.e. `TextProps`).
+   *
+   * @example
+   * TextComponent={MyAppText}
+   */
+  TextComponent?: ComponentType<TextProps & { children?: ReactNode }>;
+
+  /**
+   * Render prop for all text nodes rendered by the HTML renderer.
+   * Receives the full `TextProps` (including `style`, `children`, accessibility props, etc.)
+   * and must return a renderable node. Takes priority over `TextComponent` when both are set.
+   *
+   * @example
+   * renderTextComponent={(props) => <MyText {...props} />}
+   */
+  renderTextComponent?: (props: TextProps) => ReactNode;
+
+  // style props
+  baseStyle?: TextStyle;
+  tagStyles?: Partial<TagStyles>;
+  classesStyles?: {
+    [className: string]: HtmlStyle;
+  };
+  listGap?: number;
+
+  // interaction/functional props
+  onLinkPress?: (options: OnHTMLLinkPress) => void;
+  markerColor?: string;
+  overrideExternalLinkTintColor?: ColorValue;
+}

package/src/utils.ts

@@ -0,0 +1,43 @@
+import type { AnyNode, ChildNode, Element } from 'domhandler';
+
+import { type HTMLTag, rendererTypeMap } from './types';
+
+export const isTextRenderer = (node: AnyNode | ChildNode | null): boolean => {
+  if (!node) {
+    return false;
+  }
+  if (node.type === 'tag') {
+    return rendererTypeMap[node.tagName as HTMLTag] === 'text';
+  }
+  return node.type === 'text';
+};
+
+// Concatenate all text nodes from children
+export const concatTextNodes = (children: (AnyNode | ChildNode)[]): string => {
+  let result = '';
+  for (const child of children) {
+    if (child.type === 'text') {
+      result += child.data;
+    }
+    // Recursively check for text nodes in element children
+    if (child.type === 'tag' && Array.isArray(child.children)) {
+      result += concatTextNodes(child.children);
+    }
+  }
+  return result;
+};
+
+export const isList = (child: ChildNode) => {
+  return child.type === 'tag' && (child.tagName === 'ol' || child.tagName === 'ul');
+};
+
+export const getTextFromNode = (node: Element): string => {
+  return node.children.map((c) => (c.type === 'text' ? c.data : '')).join('');
+};
+
+export const isExternalURL = (url?: string): boolean => {
+  if (!url) {
+    return false;
+  }
+  return url.startsWith('https://') || url.startsWith('http://');
+};