Option to provide a custom component as wrapper / pass className to wrapper?

[WillNeve]

Option to provide a custom component as wrapper / pass className to wrapper?

I apologise in advance if this is covered in the docs but I could not find it

• Is there an ability to provide a custom component as the wrapper instead of a base element type like options={{ wrapper: 'div' }}?
• ... Or to provide a className for the existing wrapper element?

[YogiDhingani]

@WillNeve

• Yes, you can provide a custom component as a wrapper.
• Since you are defining the custom component, you have complete control over the wrapper. You can add all the attributes you want, such as className, id, etc.

Example:

import Markdown from 'markdown-to-jsx';

type CustomElementProps = {
    children: React.ReactNode;
};

const CustomElement = ({ children }: CustomElementProps) => {
    return <section className="section-class"> {children} </section>;
};

const answer = `# A first-level heading 
## A second-level heading 
### A third-level heading`;

function App() {
    return (
        <Markdown
            options={{
                wrapper: CustomElement,
            }}
        >
            {answer}
        </Markdown>
    );
}

export default App;

Output: