How to load a markup file into a reaction component?

Question

How to load markdown .md file into response component? I have tried so many npm libraries through google searches and I cannot find a good solution.

I want to download a .md file something like this:

render() { <div> <MarkDown src="about.md" /> </div> } 

Answer 1

I use the flag ( GitHub ).

I first import it like this:

 import marked from "marked"; 

Then I extract my * .md file in the React componentDidMount event and save it in the state of my component using marked(text) (where text is the answer):

 componentDidMount() { const readmePath = require("./Readme.md"); fetch(readmePath) .then(response => { return response.text() }) .then(text => { this.setState({ markdown: marked(text) }) }) } 

... and finally, I display it on the page using the dangerouslySetInnerHTML attribute:

 render() { const { markdown } = this.state; return ( <section> <article dangerouslySetInnerHTML={{__html: markdown}}></article> </section> ) } 

Answer 2

Full working example with react-markdown :

 import React, { Component } from 'react' import ReactMarkdown from 'react-markdown' import termsFrPath from './Terms.fr.md' class Terms extends Component { constructor(props) { super(props) this.state = { terms: null } } componentWillMount() { fetch(termsFrPath).then((response) => response.text()).then((text) => { this.setState({ terms: text }) }) } render() { return ( <div className="content"> <ReactMarkdown source={this.state.terms} /> </div> ) } } export default Terms 

Answer 3

You must use a markdown in response to the accepted answer , this solution does not use dangerouslySetInnerHTML .

App.js

 import React, { Component } from 'react'; import AppMarkdown from './App.md'; import ReactMarkdown from 'react-markdown'; class App extends Component { constructor() { super(); this.state = { markdown: '' }; } componentWillMount() { // Get the contents from the Markdown file and put them in the React state, so we can reference it in render() below. fetch(AppMarkdown).then(res => res.text()).then(text => this.setState({ markdown: text })); } render() { const { markdown } = this.state; return <ReactMarkdown source={markdown} />; } } export default App; 

App.md

 # React & Markdown App * Benefits of using React... but... * Write layout in Markdown! 

Answer 4

markdown-to-jsx provides very efficient functionality for interacting with markdown in the React component.

This allows you to replace / override any HTML element with your custom markdown component, here is the document .

 import React, { Component } from 'react' import Markdown from 'markdown-to-jsx'; import README from './README.md' class PageComponent extends Component { constructor(props) { super(props) this.state = { md: "" } } componentWillMount() { fetch(README) .then((res) => res.text()) .then((md) => { this.setState({ md }) }) } render() { let { md } = this.state return ( <div className="post"> <Markdown children={md}/> </div> ) } } export default PageComponent 

Answer 5

If you use Webpack (e.g. Electron React Boilerplate ), you can save a few steps using Webpack loaders.

 npm i -D html-loader markdown-loader marked 

In webpack.config.renderer.dev.js:

 import marked from 'marked'; const markdownRenderer = new marked.Renderer(); .... // Markdown { test: /\.md$/, use: [ { loader: 'html-loader' }, { loader: 'markdown-loader', options: { pedantic: true, renderer: markdownRenderer } } ] } 

Then, in the React component, this is just a requirement and customization of the HTML.

 import knownIssues from '../assets/md/known-issues.md'; .... <p dangerouslySetInnerHTML={{ __html: knownIssues }} /> 

Finally, Flow will report an error (it still works) when importing a markdown file. Add this to .flowconfig to make Flow treat md files as string resources (taking care of Webpack):

 module.name_mapper.extension='md' -> '<PROJECT_ROOT>/internals/flow/WebpackAsset.js.flow' 

Answer 6

I suggest you use react-markdown . You can try the demo. This allows you to write:

 var React = require('react'); var Markdown = require('react-markdown'); React.render( <Markdown source="# Your markdown here" />, document.getElementById('content') );