React render *.md via custom component

Question

Its easy to render markdown data via react-markdown module. But I cant implement render all *.md files via custom MarkdownPage component:

<Route path="*.md" component={MarkdownPage} />

but route didn't work and *.md-files open in browser as-is.

I'm expecting that this file will be provided as a data to component via props, to do something like:

render() {
  return (
    <h1>Pretty markdown</h1>
    <Page>
      <ReactMarkdown source={this.props} />
    </Page>
  );
}

How could I achieve this?

Fabian Schultz · Accepted Answer · 2016-11-29T23:21:06.973

3

One approach would be to use a GET request to either a .md file or a JSON that includes the markdown as a string. Here's an example of that:

class ReactMarkdown extends React.Component {
  constructor() {
    super();
    this.state = { html: '' };
  }

  componentDidMount() {
    fetch(this.props.md)
      .then(response => response.text())
      .then(markdown => this.setState({ html: marked(markdown) }));
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.html }}></div>
    );
  }
}

ReactDOM.render(<ReactMarkdown md="https://cdn.rawgit.com/fabe/react-portfolio/master/README.md"/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.6/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="View"></div>

With React Router:

<Route path="/markdown/:file" component={MarkdownPage} />
// Example route: localhost:3000/markdown/x.md

Then inside your component:

fetch('/' + this.props.params.file)

edited Nov 29 '16 at 23:21

answered Nov 29 '16 at 21:49

Fabian Schultz

18,138
5
49
56

1

You don't need `const _this = this` when using arrow functions, `this` is [lexically bound](http://stackoverflow.com/a/28372106/63011). – Paolo Moretti Nov 29 '16 at 21:57
Thanks, that makes it even more simple. – Fabian Schultz Nov 29 '16 at 21:59
Yes, I'm using webpack. But there is a need to render any `*.md* file, so I could not require specific one. – Serhii Nov 29 '16 at 22:02
Then the GET request is probably your best option. – Fabian Schultz Nov 29 '16 at 22:03
A code example is right there in my answer. I'm doing a GET request to a remote .md file and render it. Click on "Run code snippet" to see what the code is doing. – Fabian Schultz Nov 29 '16 at 22:06
so my webpack loader should be like `{test: /\.md$/, loader: 'raw-loader!reactmarkdown'}` ? it didnt work. – Serhii Nov 29 '16 at 22:37
Sorry for the confusion. For my code example you do not need to use a loader. You only need to pass a URL of an .md file as a prop. In my example I used a `rawgit.com/...` URL, but you can also use a local path like `/path/to/your-file.md`. Go through the example carefully. – Fabian Schultz Nov 29 '16 at 22:41
The question is about any *.md file that would be requested from server. Raw data from it should be passed as prop to a react component, that will render it. Shortly: how to send requested file adres as a prop parameter? – Serhii Nov 29 '16 at 22:47
`http://localhost:3000/x.md` => `"/x.md"` as a prop to `ReactMarkdown`, so discussed code will work. Is it possible to do this? Im really sorry for inconvenience. – Serhii Nov 29 '16 at 22:55
by any custom local route this didn`t work. Its only open raw markdown file without any js or something. – Serhii Nov 29 '16 at 23:14
Updated my question. If you want to actually overwrite the serverside routing of the markdown files, you need to change the config of your server. Using a different route for this is easier. – Fabian Schultz Nov 29 '16 at 23:21

React render *.md via custom component

1 Answers1