react-remarkify/dist/hooks.js

A simple React.js utility to convert Markdown into React components.

import { toJsxRuntime } from "hast-util-to-jsx-runtime";
import { useMemo, isValidElement, cloneElement, useCallback } from "react";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import rehypeReact from "rehype-react";
import remarkParse from "remark-parse";
import remarkToRehype from "remark-rehype";
import { unified } from "unified";
import { NodeToKey, tryCatch } from "./utils.js";
export function useRemark({ markdown, rehypePlugins = [], rehypeReactOptions, remarkParseOptions, remarkPlugins = [], remarkToRehypeOptions, components, onError = console.error, }) {
    const processor = useMemo(() => unified()
        .use(remarkParse, remarkParseOptions)
        .use(remarkPlugins)
        .use(remarkToRehype, remarkToRehypeOptions)
        .use(rehypePlugins)
        .use(rehypeReact, Object.assign(Object.assign({}, rehypeReactOptions), { Fragment, jsx, jsxs })), [JSON.stringify(rehypePlugins), JSON.stringify(rehypeReactOptions), JSON.stringify(remarkParseOptions), JSON.stringify(remarkPlugins), JSON.stringify(remarkToRehypeOptions)]);
    const processReactNode = useCallback((node) => {
        var _a;
        if (typeof node === "string") {
            const { success, data, error } = tryCatch(() => {
                const file = processor.processSync(node);
                return (components ? processor.runSync(processor.parse(file), file) : file.result);
            });
            if (success)
                return components ? toJsxRuntime(data, { Fragment, components, ignoreInvalidStyle: true, jsx, jsxs, passKeys: true, passNode: true }) : data;
            onError(error);
            return node;
        }
        if (Array.isArray(node))
            return node.map(processReactNode);
        if (isValidElement(node))
            return cloneElement(node, { key: (_a = node.key) !== null && _a !== void 0 ? _a : Math.random(), children: processReactNode(node.props.children) });
        return null;
    }, [processor, JSON.stringify(components), onError]);
    const reactContent = useMemo(() => processReactNode(markdown), [NodeToKey(markdown), processReactNode]);
    return reactContent;
}