How do I render an MD file for a custom Storybook addon?

Question

I am trying to render an MD file passed through parameters. I can successfully get the text to display, but I really want to get it formatted like an MD file.

I was trying to use @storybook/addon-docs but it appears these need to be used in an MDX file instead of directly in React, as I am getting this error: Uncaught TypeError: storyById is not a function.

import React from 'react';
import { useParameter } from '@storybook/api';
import { Title, Description } from '@storybook/addon-docs';
import { PARAM_KEY } from '../constants';

const WhatsNewPanel = (props: any) => {
  const value = useParameter(PARAM_KEY, null);
  const item = value ? value : 'No Markdown Defined';
  return (
    <>
      <Title>What&apos;s New?</Title>
      <Description>{item}</Description>
    </>
  );
};

export default WhatsNewPanel;

If I remove the Title and Description components, I can see the unformatted MD text successfully.

Does anyone know of an API or way to render the MD file formatted?

My PR code.

Answer 1

react-markdown was my first attempt which worked sufficiently, but then I found that if I pulled import { Description } from "@storybook/components"; instead of @storybook/addon-docs, everything worked as expected.

Code can be seen in my Pull Request.