How to set Image size in ReactMarkdown

ReactMarkdown is used to render markdown data in pure react component. This library is useful if you are creating blogs. We can put the post contents in markdown files and ReactMarkdown can render that data.

But, if you add an Image in the markdown file, ReactMarkdown will render it with its original width. If the image size is more than the width of screen, it will stretch beyond the screen width.

To solve that, we need to specify in ReactMarkdown what the maxWidth of an image should be.

Solution :

To fix this, you need to create one new component for images :

const BlogImage = (props) => {
  return <img {...props} style={{ maxWidth: "100%" }} />
}

and pass that component in the renderers as image.

<ReactMarkdown
  escapeHtml={false}
  source={content}
  renderers={{ code: CodeBlock, image: BlogImage }}
/>

That’s it. it will take max width 100%.