react-native-marked 7.1.1 → 8.0.0

package/README.md

@@ -112,6 +112,7 @@ const CustomComponent = () => {
 - [x] List (ordered, unordered)
 - [x] Horizontal Rule
 - [x] Table
+- [x] React Components (via `useMarkdownWithComponents`)
 - [ ] HTML
 
 Ref: [CommonMark](https://commonmark.org/help/)
@@ -119,6 +120,77 @@ Ref: [CommonMark](https://commonmark.org/help/)
 > HTML will be treated as plain text. Please refer [issue#290](https://github.com/gmsgowtham/react-native-marked/issues/290) for a potential solution
 
 ## Advanced
+
+### Embedding React Components in Markdown
+
+You can embed React components directly in your markdown using JSX-style syntax. This is useful for adding interactive elements like buttons, custom info boxes, or any other React component.
+
+```tsx
+import React, { Fragment } from "react";
+import { Pressable, ScrollView, Text, View } from "react-native";
+import {
+  ReactComponentRegistryProvider,
+  useMarkdownWithComponents,
+  type ReactComponentRegistry,
+} from "react-native-marked";
+
+// Define your components
+const components: ReactComponentRegistry = {
+  Button: ({ props }) => (
+    <Pressable onPress={() => console.log("Pressed!")}>
+      <Text>{String(props.label ?? "Click me")}</Text>
+    </Pressable>
+  ),
+  InfoBox: ({ props, children }) => (
+    <View style={{ backgroundColor: "#E3F2FD", padding: 16 }}>
+      {props.title && <Text style={{ fontWeight: "bold" }}>{String(props.title)}</Text>}
+      <Text>{children}</Text>
+    </View>
+  ),
+};
+
+const markdown = `
+# Hello World
+
+Click the button below:
+
+<Button label="Get Started" />
+
+<InfoBox title="Note">
+This is an info box with **markdown** content.
+</InfoBox>
+`;
+
+function MarkdownContent() {
+  const elements = useMarkdownWithComponents(markdown);
+  return (
+    <ScrollView>
+      {elements.map((element, index) => (
+        <Fragment key={index}>{element}</Fragment>
+      ))}
+    </ScrollView>
+  );
+}
+
+export default function App() {
+  return (
+    <ReactComponentRegistryProvider components={components}>
+      <MarkdownContent />
+    </ReactComponentRegistryProvider>
+  );
+}
+```
+
+#### Component Syntax
+
+- **Self-closing:** `<ComponentName prop="value" />`
+- **With children:** `<ComponentName>content</ComponentName>`
+- **Props:** Supports string (`"value"`), number (`{42}`), and boolean (`{true}`) props
+
+#### Component Registry
+
+Components must be registered via `ReactComponentRegistryProvider`. Unregistered components are automatically removed from the output.
+
 ### Using custom components
 
 > Custom components can be used to override elements, i.e. Code Highlighting, Fast Image integration

package/dist/commonjs/hooks/useMarkdownWithComponents.js

@@ -0,0 +1,74 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+exports.useMarkdownWithComponents = useMarkdownWithComponents;
+var _react = _interopRequireWildcard(require("react"));
+var _ReactComponentRegistry = require("../lib/ReactComponentRegistry");
+var _ReactComponentTokenizer = require("../lib/ReactComponentTokenizer");
+var _Renderer = _interopRequireDefault(require("../lib/Renderer"));
+var _useMarkdown = _interopRequireDefault(require("./useMarkdown"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function useMarkdownWithComponents(value, options) {
+  const registry = (0, _ReactComponentRegistry.useReactComponentRegistry)();
+  const {
+    tokenizer,
+    componentMap
+  } = (0, _react.useMemo)(() => {
+    const map = new Map();
+    const customTokenizer = new _ReactComponentTokenizer.ReactComponentTokenizer();
+    const originalHtml = customTokenizer.html.bind(customTokenizer);
+    let componentCounter = 0;
+    customTokenizer.html = src => {
+      const token = originalHtml(src);
+      if (token && (0, _ReactComponentTokenizer.isReactComponentToken)(token)) {
+        const id = `${token.componentName}-${componentCounter++}`;
+        map.set(token.raw, {
+          token,
+          id
+        });
+      }
+      return token;
+    };
+    return {
+      tokenizer: customTokenizer,
+      componentMap: map
+    };
+  }, []);
+  const baseRenderer = (0, _react.useMemo)(() => options?.renderer ?? new _Renderer.default(), [options?.renderer]);
+  const renderer = (0, _react.useMemo)(() => {
+    const wrappedRenderer = Object.create(baseRenderer);
+    wrappedRenderer.html = (text, styles) => {
+      if (typeof text === "string") {
+        const data = componentMap.get(text);
+        if (data) {
+          if (registry?.hasComponent(data.token.componentName)) {
+            const Component = registry.getComponent(data.token.componentName);
+            if (Component) {
+              return /*#__PURE__*/(0, _jsxRuntime.jsx)(Component, {
+                props: data.token.componentProps,
+                children: data.token.componentChildren || undefined
+              }, data.id);
+            }
+          }
+          return null;
+        }
+      }
+      return baseRenderer.html(text, styles);
+    };
+    return wrappedRenderer;
+  }, [baseRenderer, componentMap, registry]);
+  const elements = (0, _useMarkdown.default)(value, {
+    ...options,
+    tokenizer,
+    renderer
+  });
+  return elements;
+}
+var _default = exports.default = useMarkdownWithComponents;
+//# sourceMappingURL=useMarkdownWithComponents.js.map

package/dist/commonjs/hooks/useMarkdownWithComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_ReactComponentRegistry","_ReactComponentTokenizer","_Renderer","_interopRequireDefault","_useMarkdown","_jsxRuntime","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","useMarkdownWithComponents","value","options","registry","useReactComponentRegistry","tokenizer","componentMap","useMemo","map","Map","customTokenizer","ReactComponentTokenizer","originalHtml","html","bind","componentCounter","src","token","isReactComponentToken","id","componentName","raw","baseRenderer","renderer","Renderer","wrappedRenderer","create","text","styles","data","hasComponent","Component","getComponent","jsx","props","componentProps","children","componentChildren","undefined","elements","useMarkdown","_default","exports"],"sourceRoot":"../../../src","sources":["hooks/useMarkdownWithComponents.tsx"],"mappings":"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","ignoreList":[]}

package/dist/commonjs/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "MarkedTokenizer", {
     return _marked.Tokenizer;
   }
 });
+Object.defineProperty(exports, "ReactComponentRegistryProvider", {
+  enumerable: true,
+  get: function () {
+    return _ReactComponentRegistry.ReactComponentRegistryProvider;
+  }
+});
 Object.defineProperty(exports, "Renderer", {
   enumerable: true,
   get: function () {
@@ -29,9 +35,17 @@ Object.defineProperty(exports, "useMarkdown", {
     return _useMarkdown.default;
   }
 });
+Object.defineProperty(exports, "useMarkdownWithComponents", {
+  enumerable: true,
+  get: function () {
+    return _useMarkdownWithComponents.default;
+  }
+});
 var _marked = require("marked");
 var _useMarkdown = _interopRequireDefault(require("./hooks/useMarkdown"));
+var _useMarkdownWithComponents = _interopRequireDefault(require("./hooks/useMarkdownWithComponents"));
 var _Markdown = _interopRequireDefault(require("./lib/Markdown"));
+var _ReactComponentRegistry = require("./lib/ReactComponentRegistry");
 var _Renderer = _interopRequireDefault(require("./lib/Renderer"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const MarkedLexer = exports.MarkedLexer = _marked.marked.lexer;

package/dist/commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_marked","require","_useMarkdown","_interopRequireDefault","_Markdown","_Renderer","e","__esModule","default","MarkedLexer","exports","marked","lexer","_default","Markdown"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,SAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,SAAA,GAAAF,sBAAA,CAAAF,OAAA;AAAsC,SAAAE,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQtC,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,cAAM,CAACC,KAAK;AAAC,IAAAC,QAAA,GAAAH,OAAA,CAAAF,OAAA,GAclBM,iBAAQ","ignoreList":[]}
+{"version":3,"names":["_marked","require","_useMarkdown","_interopRequireDefault","_useMarkdownWithComponents","_Markdown","_ReactComponentRegistry","_Renderer","e","__esModule","default","MarkedLexer","exports","marked","lexer","_default","Markdown"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AACA,IAAAA,OAAA,GAAAC,OAAA;AAKA,IAAAC,YAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,0BAAA,GAAAD,sBAAA,CAAAF,OAAA;AACA,IAAAI,SAAA,GAAAF,sBAAA,CAAAF,OAAA;AAEA,IAAAK,uBAAA,GAAAL,OAAA;AACA,IAAAM,SAAA,GAAAJ,sBAAA,CAAAF,OAAA;AAAsC,SAAAE,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAQtC,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,cAAM,CAACC,KAAK;AAAC,IAAAC,QAAA,GAAAH,OAAA,CAAAF,OAAA,GAuBlBM,iBAAQ","ignoreList":[]}

package/dist/commonjs/lib/ReactComponentRegistry.js

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ReactComponentRegistryProvider = ReactComponentRegistryProvider;
+exports.useReactComponentRegistry = useReactComponentRegistry;
+var _react = _interopRequireWildcard(require("react"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const ReactComponentRegistryContext = /*#__PURE__*/(0, _react.createContext)(null);
+function ReactComponentRegistryProvider({
+  components,
+  children
+}) {
+  const contextValue = (0, _react.useMemo)(() => ({
+    components,
+    getComponent: name => components[name],
+    hasComponent: name => name in components
+  }), [components]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(ReactComponentRegistryContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+function useReactComponentRegistry() {
+  return (0, _react.useContext)(ReactComponentRegistryContext);
+}
+//# sourceMappingURL=ReactComponentRegistry.js.map

package/dist/commonjs/lib/ReactComponentRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","_interopRequireWildcard","require","_jsxRuntime","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ReactComponentRegistryContext","createContext","ReactComponentRegistryProvider","components","children","contextValue","useMemo","getComponent","name","hasComponent","jsx","Provider","value","useReactComponentRegistry","useContext"],"sourceRoot":"../../../src","sources":["lib/ReactComponentRegistry.tsx"],"mappings":";;;;;;;AACA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAkE,IAAAC,WAAA,GAAAD,OAAA;AAAA,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAoBlE,MAAMW,6BAA6B,gBAClC,IAAAC,oBAAa,EAA4C,IAAI,CAAC;AAOxD,SAASC,8BAA8BA,CAAC;EAC9CC,UAAU;EACVC;AACoC,CAAC,EAAE;EACvC,MAAMC,YAAY,GAAG,IAAAC,cAAO,EAC3B,OAAO;IACNH,UAAU;IACVI,YAAY,EAAGC,IAAY,IAAKL,UAAU,CAACK,IAAI,CAAC;IAChDC,YAAY,EAAGD,IAAY,IAAKA,IAAI,IAAIL;EACzC,CAAC,CAAC,EACF,CAACA,UAAU,CACZ,CAAC;EAED,oBACC,IAAAxB,WAAA,CAAA+B,GAAA,EAACV,6BAA6B,CAACW,QAAQ;IAACC,KAAK,EAAEP,YAAa;IAAAD,QAAA,EAC1DA;EAAQ,CAC8B,CAAC;AAE3C;AAEO,SAASS,yBAAyBA,CAAA,EAA8C;EACtF,OAAO,IAAAC,iBAAU,EAACd,6BAA6B,CAAC;AACjD","ignoreList":[]}

package/dist/commonjs/lib/ReactComponentTokenizer.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ReactComponentTokenizer = void 0;
+exports.isReactComponentToken = isReactComponentToken;
+var _marked = require("marked");
+const SELF_CLOSING_REGEX = /^<([A-Z][a-zA-Z0-9]*)([^>]*?)\s*\/>/;
+const OPENING_TAG_REGEX = /^<([A-Z][a-zA-Z0-9]*)([^>]*)>/;
+const PROP_REGEX = /(\w+)(?:=(?:"([^"]*)"|'([^']*)'|\{([^}]*)\}))?/g;
+function parseProps(propsString) {
+  const props = {};
+  if (!propsString) return props;
+  let match;
+  match = PROP_REGEX.exec(propsString);
+  while (match !== null) {
+    const [, propName, doubleQuoted, singleQuoted, braced] = match;
+    if (propName) {
+      if (doubleQuoted !== undefined) {
+        props[propName] = doubleQuoted;
+      } else if (singleQuoted !== undefined) {
+        props[propName] = singleQuoted;
+      } else if (braced !== undefined) {
+        const trimmed = braced.trim();
+        if (trimmed === "true") {
+          props[propName] = true;
+        } else if (trimmed === "false") {
+          props[propName] = false;
+        } else if (!Number.isNaN(Number(trimmed))) {
+          props[propName] = Number(trimmed);
+        } else {
+          props[propName] = trimmed;
+        }
+      } else {
+        props[propName] = true;
+      }
+    }
+    match = PROP_REGEX.exec(propsString);
+  }
+  PROP_REGEX.lastIndex = 0;
+  return props;
+}
+function findClosingTag(src, componentName, startIndex) {
+  const openingTag = new RegExp(`<${componentName}(?:\\s[^>]*)?>`, "g");
+  const closingTag = `</${componentName}>`;
+  let depth = 1;
+  let currentIndex = startIndex;
+  while (depth > 0 && currentIndex < src.length) {
+    const closingIndex = src.indexOf(closingTag, currentIndex);
+    if (closingIndex === -1) return null;
+    openingTag.lastIndex = currentIndex;
+    let nestedMatch;
+    nestedMatch = openingTag.exec(src);
+    while (nestedMatch !== null && nestedMatch.index < closingIndex) {
+      depth++;
+      nestedMatch = openingTag.exec(src);
+    }
+    depth--;
+    if (depth === 0) {
+      return {
+        endIndex: closingIndex + closingTag.length,
+        children: src.slice(startIndex, closingIndex)
+      };
+    }
+    currentIndex = closingIndex + closingTag.length;
+  }
+  return null;
+}
+class ReactComponentTokenizer extends _marked.Tokenizer {
+  html(src) {
+    const selfClosingMatch = SELF_CLOSING_REGEX.exec(src);
+    if (selfClosingMatch) {
+      const [raw, componentName, propsString] = selfClosingMatch;
+      return this.createReactComponentToken(raw, componentName ?? "", propsString ?? "", "");
+    }
+    const openingMatch = OPENING_TAG_REGEX.exec(src);
+    if (openingMatch) {
+      const [openingTag, componentName, propsString] = openingMatch;
+      const result = findClosingTag(src, componentName ?? "", openingTag?.length ?? 0);
+      if (result) {
+        const raw = src.slice(0, result.endIndex);
+        return this.createReactComponentToken(raw, componentName ?? "", propsString ?? "", result.children);
+      }
+    }
+    return super.html(src);
+  }
+  createReactComponentToken(raw, componentName, propsString, children) {
+    return {
+      type: "html",
+      raw,
+      text: raw,
+      block: true,
+      pre: false,
+      componentName,
+      componentProps: parseProps(propsString),
+      componentChildren: children.trim()
+    };
+  }
+}
+exports.ReactComponentTokenizer = ReactComponentTokenizer;
+function isReactComponentToken(token) {
+  return "componentName" in token && typeof token.componentName === "string";
+}
+var _default = exports.default = ReactComponentTokenizer;
+//# sourceMappingURL=ReactComponentTokenizer.js.map

package/dist/commonjs/lib/ReactComponentTokenizer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_marked","require","SELF_CLOSING_REGEX","OPENING_TAG_REGEX","PROP_REGEX","parseProps","propsString","props","match","exec","propName","doubleQuoted","singleQuoted","braced","undefined","trimmed","trim","Number","isNaN","lastIndex","findClosingTag","src","componentName","startIndex","openingTag","RegExp","closingTag","depth","currentIndex","length","closingIndex","indexOf","nestedMatch","index","endIndex","children","slice","ReactComponentTokenizer","Tokenizer","html","selfClosingMatch","raw","createReactComponentToken","openingMatch","result","type","text","block","pre","componentProps","componentChildren","exports","isReactComponentToken","token","_default","default"],"sourceRoot":"../../../src","sources":["lib/ReactComponentTokenizer.ts"],"mappings":"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","ignoreList":[]}

package/dist/module/hooks/useMarkdownWithComponents.js

@@ -0,0 +1,66 @@
+"use strict";
+
+import React, { useMemo } from "react";
+import { useReactComponentRegistry } from "../lib/ReactComponentRegistry";
+import { isReactComponentToken, ReactComponentTokenizer } from "../lib/ReactComponentTokenizer";
+import Renderer from "../lib/Renderer";
+import useMarkdown from "./useMarkdown";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function useMarkdownWithComponents(value, options) {
+  const registry = useReactComponentRegistry();
+  const {
+    tokenizer,
+    componentMap
+  } = useMemo(() => {
+    const map = new Map();
+    const customTokenizer = new ReactComponentTokenizer();
+    const originalHtml = customTokenizer.html.bind(customTokenizer);
+    let componentCounter = 0;
+    customTokenizer.html = src => {
+      const token = originalHtml(src);
+      if (token && isReactComponentToken(token)) {
+        const id = `${token.componentName}-${componentCounter++}`;
+        map.set(token.raw, {
+          token,
+          id
+        });
+      }
+      return token;
+    };
+    return {
+      tokenizer: customTokenizer,
+      componentMap: map
+    };
+  }, []);
+  const baseRenderer = useMemo(() => options?.renderer ?? new Renderer(), [options?.renderer]);
+  const renderer = useMemo(() => {
+    const wrappedRenderer = Object.create(baseRenderer);
+    wrappedRenderer.html = (text, styles) => {
+      if (typeof text === "string") {
+        const data = componentMap.get(text);
+        if (data) {
+          if (registry?.hasComponent(data.token.componentName)) {
+            const Component = registry.getComponent(data.token.componentName);
+            if (Component) {
+              return /*#__PURE__*/_jsx(Component, {
+                props: data.token.componentProps,
+                children: data.token.componentChildren || undefined
+              }, data.id);
+            }
+          }
+          return null;
+        }
+      }
+      return baseRenderer.html(text, styles);
+    };
+    return wrappedRenderer;
+  }, [baseRenderer, componentMap, registry]);
+  const elements = useMarkdown(value, {
+    ...options,
+    tokenizer,
+    renderer
+  });
+  return elements;
+}
+export default useMarkdownWithComponents;
+//# sourceMappingURL=useMarkdownWithComponents.js.map

package/dist/module/hooks/useMarkdownWithComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useReactComponentRegistry","isReactComponentToken","ReactComponentTokenizer","Renderer","useMarkdown","jsx","_jsx","useMarkdownWithComponents","value","options","registry","tokenizer","componentMap","map","Map","customTokenizer","originalHtml","html","bind","componentCounter","src","token","id","componentName","set","raw","baseRenderer","renderer","wrappedRenderer","Object","create","text","styles","data","get","hasComponent","Component","getComponent","props","componentProps","children","componentChildren","undefined","elements"],"sourceRoot":"../../../src","sources":["hooks/useMarkdownWithComponents.tsx"],"mappings":";;AACA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO;AACtC,SAASC,yBAAyB,QAAQ,+BAA+B;AAEzE,SACCC,qBAAqB,EACrBC,uBAAuB,QACjB,gCAAgC;AACvC,OAAOC,QAAQ,MAAM,iBAAiB;AAGtC,OAAOC,WAAW,MAAM,eAAe;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAUxC,OAAO,SAASC,yBAAyBA,CACxCC,KAAa,EACbC,OAA0C,EAC5B;EACd,MAAMC,QAAQ,GAAGV,yBAAyB,CAAC,CAAC;EAE5C,MAAM;IAAEW,SAAS;IAAEC;EAAa,CAAC,GAAGb,OAAO,CAAC,MAAM;IACjD,MAAMc,GAAG,GAAG,IAAIC,GAAG,CAAwB,CAAC;IAE5C,MAAMC,eAAe,GAAG,IAAIb,uBAAuB,CAAC,CAAC;IACrD,MAAMc,YAAY,GAAGD,eAAe,CAACE,IAAI,CAACC,IAAI,CAACH,eAAe,CAAC;IAE/D,IAAII,gBAAgB,GAAG,CAAC;IAExBJ,eAAe,CAACE,IAAI,GAAIG,GAAW,IAAK;MACvC,MAAMC,KAAK,GAAGL,YAAY,CAACI,GAAG,CAAC;MAC/B,IAAIC,KAAK,IAAIpB,qBAAqB,CAACoB,KAAK,CAAC,EAAE;QAC1C,MAAMC,EAAE,GAAG,GAAGD,KAAK,CAACE,aAAa,IAAIJ,gBAAgB,EAAE,EAAE;QACzDN,GAAG,CAACW,GAAG,CAACH,KAAK,CAACI,GAAG,EAAE;UAAEJ,KAAK;UAAEC;QAAG,CAAC,CAAC;MAClC;MACA,OAAOD,KAAK;IACb,CAAC;IAED,OAAO;MAAEV,SAAS,EAAEI,eAAe;MAAEH,YAAY,EAAEC;IAAI,CAAC;EACzD,CAAC,EAAE,EAAE,CAAC;EAEN,MAAMa,YAAY,GAAG3B,OAAO,CAC3B,MAAMU,OAAO,EAAEkB,QAAQ,IAAI,IAAIxB,QAAQ,CAAC,CAAC,EACzC,CAACM,OAAO,EAAEkB,QAAQ,CACnB,CAAC;EAED,MAAMA,QAAQ,GAAG5B,OAAO,CAAoB,MAAM;IACjD,MAAM6B,eAAe,GAAGC,MAAM,CAACC,MAAM,CAACJ,YAAY,CAAwB;IAE1EE,eAAe,CAACX,IAAI,GAAG,CAACc,IAA0B,EAAEC,MAAM,KAAgB;MACzE,IAAI,OAAOD,IAAI,KAAK,QAAQ,EAAE;QAC7B,MAAME,IAAI,GAAGrB,YAAY,CAACsB,GAAG,CAACH,IAAI,CAAC;QACnC,IAAIE,IAAI,EAAE;UACT,IAAIvB,QAAQ,EAAEyB,YAAY,CAACF,IAAI,CAACZ,KAAK,CAACE,aAAa,CAAC,EAAE;YACrD,MAAMa,SAAS,GAAG1B,QAAQ,CAAC2B,YAAY,CAACJ,IAAI,CAACZ,KAAK,CAACE,aAAa,CAAC;YACjE,IAAIa,SAAS,EAAE;cACd,oBACC9B,IAAA,CAAC8B,SAAS;gBAAeE,KAAK,EAAEL,IAAI,CAACZ,KAAK,CAACkB,cAAe;gBAAAC,QAAA,EACxDP,IAAI,CAACZ,KAAK,CAACoB,iBAAiB,IAAIC;cAAS,GAD3BT,IAAI,CAACX,EAEV,CAAC;YAEd;UACD;UACA,OAAO,IAAI;QACZ;MACD;MAEA,OAAOI,YAAY,CAACT,IAAI,CAACc,IAAI,EAAEC,MAAM,CAAC;IACvC,CAAC;IAED,OAAOJ,eAAe;EACvB,CAAC,EAAE,CAACF,YAAY,EAAEd,YAAY,EAAEF,QAAQ,CAAC,CAAC;EAE1C,MAAMiC,QAAQ,GAAGvC,WAAW,CAACI,KAAK,EAAE;IACnC,GAAGC,OAAO;IACVE,SAAS;IACTgB;EACD,CAAC,CAAC;EAEF,OAAOgB,QAAQ;AAChB;AAEA,eAAepC,yBAAyB","ignoreList":[]}

package/dist/module/index.js

@@ -2,9 +2,11 @@
 
 import { Hooks as MarkedHooks, Tokenizer as MarkedTokenizer, marked } from "marked";
 import useMarkdown from "./hooks/useMarkdown";
+import useMarkdownWithComponents from "./hooks/useMarkdownWithComponents";
 import Markdown from "./lib/Markdown";
+import { ReactComponentRegistryProvider } from "./lib/ReactComponentRegistry";
 import Renderer from "./lib/Renderer";
 const MarkedLexer = marked.lexer;
-export { useMarkdown, MarkedLexer, Renderer, MarkedTokenizer, MarkedHooks };
+export { useMarkdown, useMarkdownWithComponents, MarkedLexer, Renderer, MarkedTokenizer, MarkedHooks, ReactComponentRegistryProvider };
 export default Markdown;
 //# sourceMappingURL=index.js.map

package/dist/module/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["Hooks","MarkedHooks","Tokenizer","MarkedTokenizer","marked","useMarkdown","Markdown","Renderer","MarkedLexer","lexer"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AACA,SACCA,KAAK,IAAIC,WAAW,EACpBC,SAAS,IAAIC,eAAe,EAC5BC,MAAM,QACA,QAAQ;AACf,OAAOC,WAAW,MAAuC,qBAAqB;AAC9E,OAAOC,QAAQ,MAAM,gBAAgB;AACrC,OAAOC,QAAQ,MAAM,gBAAgB;AAQrC,MAAMC,WAAW,GAAGJ,MAAM,CAACK,KAAK;AAYhC,SAASJ,WAAW,EAAEG,WAAW,EAAED,QAAQ,EAAEJ,eAAe,EAAEF,WAAW;AAEzE,eAAeK,QAAQ","ignoreList":[]}
+{"version":3,"names":["Hooks","MarkedHooks","Tokenizer","MarkedTokenizer","marked","useMarkdown","useMarkdownWithComponents","Markdown","ReactComponentRegistryProvider","Renderer","MarkedLexer","lexer"],"sourceRoot":"../../src","sources":["index.ts"],"mappings":";;AACA,SACCA,KAAK,IAAIC,WAAW,EACpBC,SAAS,IAAIC,eAAe,EAC5BC,MAAM,QACA,QAAQ;AACf,OAAOC,WAAW,MAAuC,qBAAqB;AAC9E,OAAOC,yBAAyB,MAAM,mCAAmC;AACzE,OAAOC,QAAQ,MAAM,gBAAgB;AAErC,SAASC,8BAA8B,QAAQ,8BAA8B;AAC7E,OAAOC,QAAQ,MAAM,gBAAgB;AAQrC,MAAMC,WAAW,GAAGN,MAAM,CAACO,KAAK;AAahC,SACCN,WAAW,EACXC,yBAAyB,EACzBI,WAAW,EACXD,QAAQ,EACRN,eAAe,EACfF,WAAW,EACXO,8BAA8B;AAG/B,eAAeD,QAAQ","ignoreList":[]}

package/dist/module/lib/ReactComponentRegistry.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import React, { createContext, useContext, useMemo } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ReactComponentRegistryContext = /*#__PURE__*/createContext(null);
+export function ReactComponentRegistryProvider({
+  components,
+  children
+}) {
+  const contextValue = useMemo(() => ({
+    components,
+    getComponent: name => components[name],
+    hasComponent: name => name in components
+  }), [components]);
+  return /*#__PURE__*/_jsx(ReactComponentRegistryContext.Provider, {
+    value: contextValue,
+    children: children
+  });
+}
+export function useReactComponentRegistry() {
+  return useContext(ReactComponentRegistryContext);
+}
+//# sourceMappingURL=ReactComponentRegistry.js.map

package/dist/module/lib/ReactComponentRegistry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","createContext","useContext","useMemo","jsx","_jsx","ReactComponentRegistryContext","ReactComponentRegistryProvider","components","children","contextValue","getComponent","name","hasComponent","Provider","value","useReactComponentRegistry"],"sourceRoot":"../../../src","sources":["lib/ReactComponentRegistry.tsx"],"mappings":";;AACA,OAAOA,KAAK,IAAIC,aAAa,EAAEC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAoBlE,MAAMC,6BAA6B,gBAClCL,aAAa,CAA4C,IAAI,CAAC;AAO/D,OAAO,SAASM,8BAA8BA,CAAC;EAC9CC,UAAU;EACVC;AACoC,CAAC,EAAE;EACvC,MAAMC,YAAY,GAAGP,OAAO,CAC3B,OAAO;IACNK,UAAU;IACVG,YAAY,EAAGC,IAAY,IAAKJ,UAAU,CAACI,IAAI,CAAC;IAChDC,YAAY,EAAGD,IAAY,IAAKA,IAAI,IAAIJ;EACzC,CAAC,CAAC,EACF,CAACA,UAAU,CACZ,CAAC;EAED,oBACCH,IAAA,CAACC,6BAA6B,CAACQ,QAAQ;IAACC,KAAK,EAAEL,YAAa;IAAAD,QAAA,EAC1DA;EAAQ,CAC8B,CAAC;AAE3C;AAEA,OAAO,SAASO,yBAAyBA,CAAA,EAA8C;EACtF,OAAOd,UAAU,CAACI,6BAA6B,CAAC;AACjD","ignoreList":[]}

package/dist/module/lib/ReactComponentTokenizer.js

@@ -0,0 +1,100 @@
+"use strict";
+
+import { Tokenizer } from "marked";
+const SELF_CLOSING_REGEX = /^<([A-Z][a-zA-Z0-9]*)([^>]*?)\s*\/>/;
+const OPENING_TAG_REGEX = /^<([A-Z][a-zA-Z0-9]*)([^>]*)>/;
+const PROP_REGEX = /(\w+)(?:=(?:"([^"]*)"|'([^']*)'|\{([^}]*)\}))?/g;
+function parseProps(propsString) {
+  const props = {};
+  if (!propsString) return props;
+  let match;
+  match = PROP_REGEX.exec(propsString);
+  while (match !== null) {
+    const [, propName, doubleQuoted, singleQuoted, braced] = match;
+    if (propName) {
+      if (doubleQuoted !== undefined) {
+        props[propName] = doubleQuoted;
+      } else if (singleQuoted !== undefined) {
+        props[propName] = singleQuoted;
+      } else if (braced !== undefined) {
+        const trimmed = braced.trim();
+        if (trimmed === "true") {
+          props[propName] = true;
+        } else if (trimmed === "false") {
+          props[propName] = false;
+        } else if (!Number.isNaN(Number(trimmed))) {
+          props[propName] = Number(trimmed);
+        } else {
+          props[propName] = trimmed;
+        }
+      } else {
+        props[propName] = true;
+      }
+    }
+    match = PROP_REGEX.exec(propsString);
+  }
+  PROP_REGEX.lastIndex = 0;
+  return props;
+}
+function findClosingTag(src, componentName, startIndex) {
+  const openingTag = new RegExp(`<${componentName}(?:\\s[^>]*)?>`, "g");
+  const closingTag = `</${componentName}>`;
+  let depth = 1;
+  let currentIndex = startIndex;
+  while (depth > 0 && currentIndex < src.length) {
+    const closingIndex = src.indexOf(closingTag, currentIndex);
+    if (closingIndex === -1) return null;
+    openingTag.lastIndex = currentIndex;
+    let nestedMatch;
+    nestedMatch = openingTag.exec(src);
+    while (nestedMatch !== null && nestedMatch.index < closingIndex) {
+      depth++;
+      nestedMatch = openingTag.exec(src);
+    }
+    depth--;
+    if (depth === 0) {
+      return {
+        endIndex: closingIndex + closingTag.length,
+        children: src.slice(startIndex, closingIndex)
+      };
+    }
+    currentIndex = closingIndex + closingTag.length;
+  }
+  return null;
+}
+export class ReactComponentTokenizer extends Tokenizer {
+  html(src) {
+    const selfClosingMatch = SELF_CLOSING_REGEX.exec(src);
+    if (selfClosingMatch) {
+      const [raw, componentName, propsString] = selfClosingMatch;
+      return this.createReactComponentToken(raw, componentName ?? "", propsString ?? "", "");
+    }
+    const openingMatch = OPENING_TAG_REGEX.exec(src);
+    if (openingMatch) {
+      const [openingTag, componentName, propsString] = openingMatch;
+      const result = findClosingTag(src, componentName ?? "", openingTag?.length ?? 0);
+      if (result) {
+        const raw = src.slice(0, result.endIndex);
+        return this.createReactComponentToken(raw, componentName ?? "", propsString ?? "", result.children);
+      }
+    }
+    return super.html(src);
+  }
+  createReactComponentToken(raw, componentName, propsString, children) {
+    return {
+      type: "html",
+      raw,
+      text: raw,
+      block: true,
+      pre: false,
+      componentName,
+      componentProps: parseProps(propsString),
+      componentChildren: children.trim()
+    };
+  }
+}
+export function isReactComponentToken(token) {
+  return "componentName" in token && typeof token.componentName === "string";
+}
+export default ReactComponentTokenizer;
+//# sourceMappingURL=ReactComponentTokenizer.js.map

package/dist/module/lib/ReactComponentTokenizer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["Tokenizer","SELF_CLOSING_REGEX","OPENING_TAG_REGEX","PROP_REGEX","parseProps","propsString","props","match","exec","propName","doubleQuoted","singleQuoted","braced","undefined","trimmed","trim","Number","isNaN","lastIndex","findClosingTag","src","componentName","startIndex","openingTag","RegExp","closingTag","depth","currentIndex","length","closingIndex","indexOf","nestedMatch","index","endIndex","children","slice","ReactComponentTokenizer","html","selfClosingMatch","raw","createReactComponentToken","openingMatch","result","type","text","block","pre","componentProps","componentChildren","isReactComponentToken","token"],"sourceRoot":"../../../src","sources":["lib/ReactComponentTokenizer.ts"],"mappings":"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","ignoreList":[]}

package/dist/typescript/hooks/useMarkdownWithComponents.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+import type { useMarkdownHookOptions } from "./useMarkdown";
+export interface useMarkdownWithComponentsOptions extends Omit<useMarkdownHookOptions, "tokenizer"> {
+}
+export declare function useMarkdownWithComponents(value: string, options?: useMarkdownWithComponentsOptions): ReactNode[];
+export default useMarkdownWithComponents;
+//# sourceMappingURL=useMarkdownWithComponents.d.ts.map

package/dist/typescript/hooks/useMarkdownWithComponents.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useMarkdownWithComponents.d.ts","sourceRoot":"","sources":["../../../src/hooks/useMarkdownWithComponents.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,eAAe,CAAC;AAG5D,MAAM,WAAW,gCAChB,SAAQ,IAAI,CAAC,sBAAsB,EAAE,WAAW,CAAC;CAAG;AAOrD,wBAAgB,yBAAyB,CACxC,KAAK,EAAE,MAAM,EACb,OAAO,CAAC,EAAE,gCAAgC,GACxC,SAAS,EAAE,CA8Db;AAED,eAAe,yBAAyB,CAAC"}

package/dist/typescript/index.d.ts

@@ -1,12 +1,15 @@
 import type { Token, Tokens } from "marked";
 import { Hooks as MarkedHooks, Tokenizer as MarkedTokenizer } from "marked";
 import useMarkdown, { type useMarkdownHookOptions } from "./hooks/useMarkdown";
+import useMarkdownWithComponents from "./hooks/useMarkdownWithComponents";
 import Markdown from "./lib/Markdown";
+import type { ReactComponentRegistry } from "./lib/ReactComponentRegistry";
+import { ReactComponentRegistryProvider } from "./lib/ReactComponentRegistry";
 import Renderer from "./lib/Renderer";
 import type { MarkdownProps, ParserOptions, RendererInterface } from "./lib/types";
 import type { MarkedStyles } from "./theme/types";
 declare const MarkedLexer: typeof import("marked").Lexer.lex;
-export type { MarkdownProps, MarkedStyles, ParserOptions, RendererInterface, useMarkdownHookOptions, Token, Tokens, };
-export { useMarkdown, MarkedLexer, Renderer, MarkedTokenizer, MarkedHooks };
+export type { MarkdownProps, MarkedStyles, ParserOptions, RendererInterface, useMarkdownHookOptions, Token, Tokens, ReactComponentRegistry, };
+export { useMarkdown, useMarkdownWithComponents, MarkedLexer, Renderer, MarkedTokenizer, MarkedHooks, ReactComponentRegistryProvider, };
 export default Markdown;
 //# sourceMappingURL=index.d.ts.map

package/dist/typescript/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EACN,KAAK,IAAI,WAAW,EACpB,SAAS,IAAI,eAAe,EAE5B,MAAM,QAAQ,CAAC;AAChB,OAAO,WAAW,EAAE,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,KAAK,EACX,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,QAAA,MAAM,WAAW,mCAAe,CAAC;AAEjC,YAAY,EACX,aAAa,EACb,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,sBAAsB,EACtB,KAAK,EACL,MAAM,GACN,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,eAAe,EAAE,WAAW,EAAE,CAAC;AAE5E,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAC5C,OAAO,EACN,KAAK,IAAI,WAAW,EACpB,SAAS,IAAI,eAAe,EAE5B,MAAM,QAAQ,CAAC;AAChB,OAAO,WAAW,EAAE,EAAE,KAAK,sBAAsB,EAAE,MAAM,qBAAqB,CAAC;AAC/E,OAAO,yBAAyB,MAAM,mCAAmC,CAAC;AAC1E,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AAC3E,OAAO,EAAE,8BAA8B,EAAE,MAAM,8BAA8B,CAAC;AAC9E,OAAO,QAAQ,MAAM,gBAAgB,CAAC;AACtC,OAAO,KAAK,EACX,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,MAAM,aAAa,CAAC;AACrB,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,eAAe,CAAC;AAElD,QAAA,MAAM,WAAW,mCAAe,CAAC;AAEjC,YAAY,EACX,aAAa,EACb,YAAY,EACZ,aAAa,EACb,iBAAiB,EACjB,sBAAsB,EACtB,KAAK,EACL,MAAM,EACN,sBAAsB,GACtB,CAAC;AAEF,OAAO,EACN,WAAW,EACX,yBAAyB,EACzB,WAAW,EACX,QAAQ,EACR,eAAe,EACf,WAAW,EACX,8BAA8B,GAC9B,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/typescript/lib/ReactComponentRegistry.d.ts

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import React from "react";
+import type { ReactComponentProps } from "./ReactComponentTokenizer";
+export interface ReactComponentRendererProps {
+    props: ReactComponentProps;
+    children?: ReactNode;
+}
+export type ReactComponentRenderer = (props: ReactComponentRendererProps) => ReactNode;
+export type ReactComponentRegistry = Record<string, ReactComponentRenderer>;
+interface ReactComponentRegistryContextValue {
+    components: ReactComponentRegistry;
+    getComponent: (name: string) => ReactComponentRenderer | undefined;
+    hasComponent: (name: string) => boolean;
+}
+interface ReactComponentRegistryProviderProps {
+    components: ReactComponentRegistry;
+    children: ReactNode;
+}
+export declare function ReactComponentRegistryProvider({ components, children, }: ReactComponentRegistryProviderProps): React.JSX.Element;
+export declare function useReactComponentRegistry(): ReactComponentRegistryContextValue | null;
+export {};
+//# sourceMappingURL=ReactComponentRegistry.d.ts.map

package/dist/typescript/lib/ReactComponentRegistry.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactComponentRegistry.d.ts","sourceRoot":"","sources":["../../../src/lib/ReactComponentRegistry.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,KAA6C,MAAM,OAAO,CAAC;AAClE,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAErE,MAAM,WAAW,2BAA2B;IAC3C,KAAK,EAAE,mBAAmB,CAAC;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,MAAM,MAAM,sBAAsB,GAAG,CACpC,KAAK,EAAE,2BAA2B,KAC9B,SAAS,CAAC;AAEf,MAAM,MAAM,sBAAsB,GAAG,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC,CAAC;AAE5E,UAAU,kCAAkC;IAC3C,UAAU,EAAE,sBAAsB,CAAC;IACnC,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,sBAAsB,GAAG,SAAS,CAAC;IACnE,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,OAAO,CAAC;CACxC;AAKD,UAAU,mCAAmC;IAC5C,UAAU,EAAE,sBAAsB,CAAC;IACnC,QAAQ,EAAE,SAAS,CAAC;CACpB;AAED,wBAAgB,8BAA8B,CAAC,EAC9C,UAAU,EACV,QAAQ,GACR,EAAE,mCAAmC,qBAerC;AAED,wBAAgB,yBAAyB,IAAI,kCAAkC,GAAG,IAAI,CAErF"}

package/dist/typescript/lib/ReactComponentTokenizer.d.ts

@@ -0,0 +1,15 @@
+import type { Tokens } from "marked";
+import { Tokenizer } from "marked";
+export type ReactComponentProps = Record<string, string | boolean | number>;
+export interface ReactComponentToken extends Tokens.HTML {
+    componentName: string;
+    componentProps: ReactComponentProps;
+    componentChildren: string;
+}
+export declare class ReactComponentTokenizer extends Tokenizer {
+    html(src: string): Tokens.HTML | undefined;
+    private createReactComponentToken;
+}
+export declare function isReactComponentToken(token: Tokens.HTML): token is ReactComponentToken;
+export default ReactComponentTokenizer;
+//# sourceMappingURL=ReactComponentTokenizer.d.ts.map

package/dist/typescript/lib/ReactComponentTokenizer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ReactComponentTokenizer.d.ts","sourceRoot":"","sources":["../../../src/lib/ReactComponentTokenizer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AACrC,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AAMnC,MAAM,MAAM,mBAAmB,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC,CAAC;AAE5E,MAAM,WAAW,mBAAoB,SAAQ,MAAM,CAAC,IAAI;IACvD,aAAa,EAAE,MAAM,CAAC;IACtB,cAAc,EAAE,mBAAmB,CAAC;IACpC,iBAAiB,EAAE,MAAM,CAAC;CAC1B;AA0ED,qBAAa,uBAAwB,SAAQ,SAAS;IAC5C,IAAI,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC,IAAI,GAAG,SAAS;IAmCnD,OAAO,CAAC,yBAAyB;CAiBjC;AAED,wBAAgB,qBAAqB,CACpC,KAAK,EAAE,MAAM,CAAC,IAAI,GAChB,KAAK,IAAI,mBAAmB,CAE9B;AAED,eAAe,uBAAuB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "react-native-marked",
-	"version": "7.1.1",
+	"version": "8.0.0",
 	"description": "Markdown renderer for React Native powered by marked.js",
 	"main": "dist/commonjs/index",
 	"module": "dist/module/index",
@@ -54,14 +54,14 @@
 		"@babel/core": "7.28.5",
 		"@babel/helper-explode-assignable-expression": "7.18.6",
 		"@babel/preset-env": "7.28.5",
-		"@biomejs/biome": "2.3.8",
+		"@biomejs/biome": "2.3.10",
 		"@commitlint/config-conventional": "20.2.0",
-		"@evilmartians/lefthook": "2.0.9",
+		"@evilmartians/lefthook": "2.0.13",
 		"@react-native/babel-preset": "0.78.2",
-		"@release-it/conventional-changelog": "10.0.2",
+		"@release-it/conventional-changelog": "10.0.4",
 		"@testing-library/react-native": "v14.0.0-alpha.1",
 		"@types/jest": "30.0.0",
-		"@types/node": "24.10.2",
+		"@types/node": "24.10.4",
 		"@types/react": "19.2.7",
 		"@types/svg-parser": "^2.0.3",
 		"commitlint": "20.2.0",
@@ -71,12 +71,12 @@
 		"jest-environment-jsdom": "29.7.0",
 		"pod-install": "1.0.9",
 		"postinstall-postinstall": "2.1.0",
-		"react": "19.2.1",
+		"react": "19.2.3",
 		"react-native": "0.78.2",
-		"react-native-builder-bob": "0.40.16",
+		"react-native-builder-bob": "0.40.17",
 		"react-native-svg": "15.15.1",
 		"reassure": "1.4.0",
-		"release-it": "19.0.6",
+		"release-it": "19.2.2",
 		"typescript": "5.9.3",
 		"universal-test-renderer": "0.6.0"
 	},
@@ -170,6 +170,6 @@
 	},
 	"resolutions": {
 		"@types/react": "19.2.7",
-		"**/pretty-format/react-is": "19.2.1"
+		"**/pretty-format/react-is": "19.2.3"
 	}
 }

package/src/hooks/useMarkdownWithComponents.tsx

@@ -0,0 +1,89 @@
+import type { ReactNode } from "react";
+import React, { useMemo } from "react";
+import { useReactComponentRegistry } from "../lib/ReactComponentRegistry";
+import type { ReactComponentToken } from "../lib/ReactComponentTokenizer";
+import {
+	isReactComponentToken,
+	ReactComponentTokenizer,
+} from "../lib/ReactComponentTokenizer";
+import Renderer from "../lib/Renderer";
+import type { RendererInterface } from "../lib/types";
+import type { useMarkdownHookOptions } from "./useMarkdown";
+import useMarkdown from "./useMarkdown";
+
+export interface useMarkdownWithComponentsOptions
+	extends Omit<useMarkdownHookOptions, "tokenizer"> {}
+
+interface ComponentData {
+	token: ReactComponentToken;
+	id: string;
+}
+
+export function useMarkdownWithComponents(
+	value: string,
+	options?: useMarkdownWithComponentsOptions,
+): ReactNode[] {
+	const registry = useReactComponentRegistry();
+
+	const { tokenizer, componentMap } = useMemo(() => {
+		const map = new Map<string, ComponentData>();
+
+		const customTokenizer = new ReactComponentTokenizer();
+		const originalHtml = customTokenizer.html.bind(customTokenizer);
+
+		let componentCounter = 0;
+
+		customTokenizer.html = (src: string) => {
+			const token = originalHtml(src);
+			if (token && isReactComponentToken(token)) {
+				const id = `${token.componentName}-${componentCounter++}`;
+				map.set(token.raw, { token, id });
+			}
+			return token;
+		};
+
+		return { tokenizer: customTokenizer, componentMap: map };
+	}, []);
+
+	const baseRenderer = useMemo(
+		() => options?.renderer ?? new Renderer(),
+		[options?.renderer],
+	);
+
+	const renderer = useMemo<RendererInterface>(() => {
+		const wrappedRenderer = Object.create(baseRenderer) as typeof baseRenderer;
+
+		wrappedRenderer.html = (text: string | ReactNode[], styles): ReactNode => {
+			if (typeof text === "string") {
+				const data = componentMap.get(text);
+				if (data) {
+					if (registry?.hasComponent(data.token.componentName)) {
+						const Component = registry.getComponent(data.token.componentName);
+						if (Component) {
+							return (
+								<Component key={data.id} props={data.token.componentProps}>
+									{data.token.componentChildren || undefined}
+								</Component>
+							);
+						}
+					}
+					return null;
+				}
+			}
+
+			return baseRenderer.html(text, styles);
+		};
+
+		return wrappedRenderer;
+	}, [baseRenderer, componentMap, registry]);
+
+	const elements = useMarkdown(value, {
+		...options,
+		tokenizer,
+		renderer,
+	});
+
+	return elements;
+}
+
+export default useMarkdownWithComponents;

package/src/index.ts

@@ -5,7 +5,10 @@ import {
 	marked,
 } from "marked";
 import useMarkdown, { type useMarkdownHookOptions } from "./hooks/useMarkdown";
+import useMarkdownWithComponents from "./hooks/useMarkdownWithComponents";
 import Markdown from "./lib/Markdown";
+import type { ReactComponentRegistry } from "./lib/ReactComponentRegistry";
+import { ReactComponentRegistryProvider } from "./lib/ReactComponentRegistry";
 import Renderer from "./lib/Renderer";
 import type {
 	MarkdownProps,
@@ -24,8 +27,17 @@ export type {
 	useMarkdownHookOptions,
 	Token,
 	Tokens,
+	ReactComponentRegistry,
 };
 
-export { useMarkdown, MarkedLexer, Renderer, MarkedTokenizer, MarkedHooks };
+export {
+	useMarkdown,
+	useMarkdownWithComponents,
+	MarkedLexer,
+	Renderer,
+	MarkedTokenizer,
+	MarkedHooks,
+	ReactComponentRegistryProvider,
+};
 
 export default Markdown;

package/src/lib/ReactComponentRegistry.tsx

@@ -0,0 +1,52 @@
+import type { ReactNode } from "react";
+import React, { createContext, useContext, useMemo } from "react";
+import type { ReactComponentProps } from "./ReactComponentTokenizer";
+
+export interface ReactComponentRendererProps {
+	props: ReactComponentProps;
+	children?: ReactNode;
+}
+
+export type ReactComponentRenderer = (
+	props: ReactComponentRendererProps,
+) => ReactNode;
+
+export type ReactComponentRegistry = Record<string, ReactComponentRenderer>;
+
+interface ReactComponentRegistryContextValue {
+	components: ReactComponentRegistry;
+	getComponent: (name: string) => ReactComponentRenderer | undefined;
+	hasComponent: (name: string) => boolean;
+}
+
+const ReactComponentRegistryContext =
+	createContext<ReactComponentRegistryContextValue | null>(null);
+
+interface ReactComponentRegistryProviderProps {
+	components: ReactComponentRegistry;
+	children: ReactNode;
+}
+
+export function ReactComponentRegistryProvider({
+	components,
+	children,
+}: ReactComponentRegistryProviderProps) {
+	const contextValue = useMemo<ReactComponentRegistryContextValue>(
+		() => ({
+			components,
+			getComponent: (name: string) => components[name],
+			hasComponent: (name: string) => name in components,
+		}),
+		[components],
+	);
+
+	return (
+		<ReactComponentRegistryContext.Provider value={contextValue}>
+			{children}
+		</ReactComponentRegistryContext.Provider>
+	);
+}
+
+export function useReactComponentRegistry(): ReactComponentRegistryContextValue | null {
+	return useContext(ReactComponentRegistryContext);
+}

package/src/lib/ReactComponentTokenizer.ts

@@ -0,0 +1,149 @@
+import type { Tokens } from "marked";
+import { Tokenizer } from "marked";
+
+const SELF_CLOSING_REGEX = /^<([A-Z][a-zA-Z0-9]*)([^>]*?)\s*\/>/;
+const OPENING_TAG_REGEX = /^<([A-Z][a-zA-Z0-9]*)([^>]*)>/;
+const PROP_REGEX = /(\w+)(?:=(?:"([^"]*)"|'([^']*)'|\{([^}]*)\}))?/g;
+
+export type ReactComponentProps = Record<string, string | boolean | number>;
+
+export interface ReactComponentToken extends Tokens.HTML {
+	componentName: string;
+	componentProps: ReactComponentProps;
+	componentChildren: string;
+}
+
+function parseProps(propsString: string): ReactComponentProps {
+	const props: ReactComponentProps = {};
+	if (!propsString) return props;
+
+	let match: RegExpExecArray | null;
+
+	match = PROP_REGEX.exec(propsString);
+	while (match !== null) {
+		const [, propName, doubleQuoted, singleQuoted, braced] = match;
+		if (propName) {
+			if (doubleQuoted !== undefined) {
+				props[propName] = doubleQuoted;
+			} else if (singleQuoted !== undefined) {
+				props[propName] = singleQuoted;
+			} else if (braced !== undefined) {
+				const trimmed = braced.trim();
+				if (trimmed === "true") {
+					props[propName] = true;
+				} else if (trimmed === "false") {
+					props[propName] = false;
+				} else if (!Number.isNaN(Number(trimmed))) {
+					props[propName] = Number(trimmed);
+				} else {
+					props[propName] = trimmed;
+				}
+			} else {
+				props[propName] = true;
+			}
+		}
+		match = PROP_REGEX.exec(propsString);
+	}
+
+	PROP_REGEX.lastIndex = 0;
+	return props;
+}
+
+function findClosingTag(
+	src: string,
+	componentName: string,
+	startIndex: number,
+): { endIndex: number; children: string } | null {
+	const openingTag = new RegExp(`<${componentName}(?:\\s[^>]*)?>`, "g");
+	const closingTag = `</${componentName}>`;
+
+	let depth = 1;
+	let currentIndex = startIndex;
+
+	while (depth > 0 && currentIndex < src.length) {
+		const closingIndex = src.indexOf(closingTag, currentIndex);
+		if (closingIndex === -1) return null;
+
+		openingTag.lastIndex = currentIndex;
+		let nestedMatch: RegExpExecArray | null;
+		nestedMatch = openingTag.exec(src);
+		while (nestedMatch !== null && nestedMatch.index < closingIndex) {
+			depth++;
+			nestedMatch = openingTag.exec(src);
+		}
+
+		depth--;
+		if (depth === 0) {
+			return {
+				endIndex: closingIndex + closingTag.length,
+				children: src.slice(startIndex, closingIndex),
+			};
+		}
+		currentIndex = closingIndex + closingTag.length;
+	}
+
+	return null;
+}
+
+export class ReactComponentTokenizer extends Tokenizer {
+	override html(src: string): Tokens.HTML | undefined {
+		const selfClosingMatch = SELF_CLOSING_REGEX.exec(src);
+		if (selfClosingMatch) {
+			const [raw, componentName, propsString] = selfClosingMatch;
+			return this.createReactComponentToken(
+				raw,
+				componentName ?? "",
+				propsString ?? "",
+				"",
+			);
+		}
+
+		const openingMatch = OPENING_TAG_REGEX.exec(src);
+		if (openingMatch) {
+			const [openingTag, componentName, propsString] = openingMatch;
+			const result = findClosingTag(
+				src,
+				componentName ?? "",
+				openingTag?.length ?? 0,
+			);
+
+			if (result) {
+				const raw = src.slice(0, result.endIndex);
+				return this.createReactComponentToken(
+					raw,
+					componentName ?? "",
+					propsString ?? "",
+					result.children,
+				);
+			}
+		}
+
+		return super.html(src);
+	}
+
+	private createReactComponentToken(
+		raw: string,
+		componentName: string,
+		propsString: string,
+		children: string,
+	): ReactComponentToken {
+		return {
+			type: "html",
+			raw,
+			text: raw,
+			block: true,
+			pre: false,
+			componentName,
+			componentProps: parseProps(propsString),
+			componentChildren: children.trim(),
+		};
+	}
+}
+
+export function isReactComponentToken(
+	token: Tokens.HTML,
+): token is ReactComponentToken {
+	return "componentName" in token && typeof token.componentName === "string";
+}
+
+export default ReactComponentTokenizer;