React-markdown: How to avoid <p> tag

[amalajeyan]

Hello,
There is a p tag always get enclosed when i use the markdown component which always disturbs my page layout. Can you please tell how to avoid that.

[jordanmkoncz]

I was wondering this as well. It would be good if there was some way to avoid having the enclosing <p> tags.

[rexxars]

Sorry for not responding earlier, I've been a bit busy with life. You could set Paragraph as a disallowedTypes and set unwrapDisallowed to true. That'll make it a bit hard to handle newlines properly, though - not sure how you want to treat those? Example:

<Markdown
    source="Normally, this *sentence* would be wrapped in a paragraph."
    disallowedTypes={['Paragraph']}
    unwrapDisallowed
/>

Or, you could just replace the renderer for paragraphs with something else:

<Markdown
    source="Normally, this *sentence* would be wrapped in a paragraph."
    renderers={{Paragraph: 'span'}}
/>

This would render <span> instead of <p>, which might not be what you want, but you can use a custom react component instead if you want. Take a look at the readme for more information on the custom renderer feature.

[Fleuv]

This doesn't work in v4.0, please confirm.

Seems like Paragraph got converted to lowercase paragraph. With the lowercase naming it does work.

[guillempuche]

You can also enable unwrapDisallowed to true.

My code:
const markdownTypesAllowed = [ 'text', 'strong', 'delete', 'emphasis', 'link' ];

<Markdown source={text} allowedTypes={markdownTypesAllowed} unwrapDisallowed={true} />