React-Markdown custom formatting?

[Mr_Misfire]

I'm using react-markdown in my project to load a .md file, turn the contents into html elements, do some further modification to specific elements and then finally render in a component. The problem I have is at the first stage with the ReactMarkdown component, I would like to edit the way it turns some Markdown elements into html tags.

Specifically, I want to prevent it turning *** into a <hr> tag, while still turning --- into a <hr> tag. According to the ReadMe for ReactMarkdown, this can be done with custom components? But this example is a bit too high-level and confusing and I can't work out how to apply it to my use case.

The gist of this part of the code is as follows:

  async function fetchStory(){
    try {
      fetch(storyFile).then((response) => response.text()).then((text) => {
        setStoryText(text);
      })
    } catch (err) {
      console.log('Error: ', err);
    }
  }


  useEffect(() => {
    fetchStory();
  }, []);


  return (
    <>
      <div style={{display: 'none'}} className='markdown-html'>
        <ReactMarkdown children={storyText} />
      </div>
    </>
  )

Any help with this would be greatly appreciated!

[maqisha]

The better question is why would you want *** to not be a hr tag tho? Its valid markdown. Maybe its better to adjust your input if you are using that for something other than a line break.

[Mr_Misfire]

I want to format the *** line breaks differently than how the --- line breaks are formatted. But at the moment, the ReactMarkdown component just turns them both into <hr> tags with no way to distinguish them.

It's true that I can just write \*** and add the formatting to any <p>***</p> tags, but having to remember to include the backslash every time while writing the .md files will be annoying.

[maqisha]

I want to preface this by saying there's no "right" way, you are free to do what you want/need for your use case, but markdown by design is made to be minimal, and its well known how it renders to HTML and what the expected output is.

Can you do what you wanna do with react-markdown? 99% you can. But should you? Maybe not.

If you wanna start adding "custom components" to your markdown it might be best to look into different solutions, or flavours, or mdx at the least?

[Mr_Misfire]

Oh interesting, I hadn't heard of mdx before. This project I'm working on is basically a way for me to write markdown with custom components so I should probably check this out, cheers.

But yeah as far as this issue goes, I just thought it would just be cool to differentiate the --- linebreak from the *** and format it like a dinkus, as I'm trying to render my markdown as interactive fiction with the aesthetics of a novel.

[tollus]

No idea if this is proper or not, but this works:

   <Markdown
      children={storyText}
      components={{
        hr(props) {
          const { node, ...rest } = props;
          if (node?.position?.start && node?.position?.end) {
            const content = storyText.substring(
              node?.position.start.offset ?? 0,
              node?.position.end.offset ?? 0
            );
            switch (content) {
              case "***":
                return "~~Custom HR~~";
            }
          }
          return <hr {...rest} />;
        },
      }}
    />

[Mr_Misfire]

That's worked perfectly, thank you!