Can customized React components be used instead of default components?

[matsudai]

Currently, components that start with a lowercase letter are not customizable.

Is there a good way to customize "h2", for example?

import { parse, renderers, transform } from "@markdoc/markdoc";

const node = parse('## Header 2');

const readableTreeNode = transform(node);

const component = renderers.react(readableTreeNode, React, {
  components: {
    // Ignored.
    h2: (props) => <h2 {...props} style={{ color: "red" }} />,
  },
});

Thanks.

---

I have tried these solutions.

(1) Map components to components that start with UPPERCASE letter.

import { nodes, parse, renderers, Tag, transform } from "@markdoc/markdoc";

const node = parse(`## Header 2`);

// Thanks for https://markdoc.io/docs/nodes#customizing-markdoc-nodes
const readableTreeNode = transform(node, {
  nodes: {
    heading: {
      ...nodes.heading,
      // Required to transform from "heading" to "Heading".
      transform: (node, config) => {
        const attributes = node.transformAttributes(config);
        const children = node.transformChildren(config);
        return new Tag(`Heading${node.attributes.level}`, attributes, children);
      },
    },
  },
});

const component = renderers.react(readableTreeNode, React, {
  components: {
    // OK. (However, required to transform from heading/level2 to H2)
    Heading2: (props: any) => <h2 {...props} style={{ color: "blue" }} />,
  },
});

(2) Change the priority of using default components, customized components and the function.

(Update to use the default component only if no customized component is found.)

Swap return name and return components[name] in src/renderers/react/shared.ts

[mfix-stripe]

Instead of using a different component for each heading level, we recommend you pass the level as a prop instead of encoding it in the components name.

This is how we handle it in our own site:

• https://github.com/markdoc/docs/blob/main/markdoc/nodes/heading.markdoc.js
• https://github.com/markdoc/docs/blob/main/components/Heading.js#L6

Hope this helps!

[matsudai]

Thanks for your help!