Use marked in reaction

Question

I want to use marked in reactions as described in reactjs docs .

<div>{marked(mystring)}</div> 

I use babel, so I import the markup as follows:

 import { marked } from 'marked'; 

Unfortunately, the import statement does not work. not indicated. How do I import the marked here so I can use it?

Answer 1

Here is one way to use marked with React :

1. Make sure you set marked
2. Include marked in your project's package.json file:

 "dependencies": { "react": "^0.13.3", "marked": "^0.3.5" }, 

3. Import marked in your .jsx (or related) file:

 import marked from 'marked'; 

4. Use the dangerouslySetInnerHTML method of the SetInnerHTML described in the tutorial7.js example in the React Tutorial (as noted by Janaka), or as shown in the example below:

 import React from 'react'; import marked from 'marked'; class MarkdownExample extends React.Component { getMarkdownText() { var rawMarkup = marked('This is _Markdown_.', {sanitize: true}); return { __html: rawMarkup }; } render() { return <div dangerouslySetInnerHTML={this.getMarkdownText()} /> } } 

As discussed in the React Tutorial , using the dangerouslySetInnerHTML attribute gives you the ability to work with raw (HTML) markup. Be careful when using this attribute !

---

Note. The React.Component approach in the sample code in step 4 is based on Agnew's "Hello World" example and on the notes from this article React.Component and React.createClass written by Goel and Silveira.

Answer 2

With a mark-wrapper reaction-mark-markdown :

 import { MarkdownPreview } from 'react-marked-markdown' export default ({ post }) => ( <div> <h1>{ post.title }</h1> <MarkdownPreview value={ post.content }/> </div> ) 

Answer 3

If you just want to import the marked ones:

 import marked from 'marked'; 

Then call the function in your component:

 marked('# Markdown');