react-markdown and renderers with arguments

I am using React Markdown (https://www.npmjs.com/package/react-markdown) to render markdown content in my NextJS project.

I have created a simple component named “ImageRenderer” and I need to pass an argument (in this case the slug) in addition props, to this component but I do not know how:

My page.js

<ReactMarkdown source={obj.default} escapeHtml={false} renderers={{ "image": ImageRenderer }} />

The component:

export default function ImageRenderer(props) {
  const imageSrc = props.src;
  const altText = props.alt;

  return (
          <img
              data-loading="lazy" 
              data-slug={slug}
              data-orig-file={imageSrc}
              alt={altText}
            />
  );
}

Answer

Try this solution. Create an anonymous function and return your component from it with the necessary props

<ReactMarkdown 
  source={obj.default}
  escapeHtml={false}
  renderers={{ 
    "image": () => <ImageRenderer src="YOUR_SRC" alt="YOUR_ALT" /> 
  }} 
/>

Advertisement

Answer