Markdown React
Markdown to React Component converter.
This project uses Markdown parser from Markdown It library, but loosely supports its plugins.
DEMO: http://alexkuz.github.io/markdown-react-js/
Install
npm i markdown-react-js
Examples
Basic example
import MDReactComponent from 'markdown-react-js'; { return <MDReactComponent ='Some text **with emphasis**.' /> ;}
or, using function instead of component:
import mdReact from 'markdown-react-js'; { return 'Some text **with emphasis**.';}
Result:
<span> <p> Some text with <strong>emphasis</strong> </p></span>
Using custom tags
const TAGS = html: 'span' // root node, replaced by default strong: 'b' em: 'i' { return <MDReactComponent ='Some **bold** and *italic* text.' = /> ;}
Result:
<span> <p> Some <b>bold</b> and <i>italic</i> text </p></span>
Using custom component renderer
{ if level === 1 props = ...props className: 'first-level-class' ; if Tag === 'a' props = ...props className: 'link-class' href: propshref ; return <Tag >children</Tag>;} { return <MDReactComponent ='[This link](SOME_URL) has it’s own style.' = /> ;}
Result:
<span> <p ="first-level-class"> <a ="http://example.com" ="link-class">This link</a> has it’s own style </p></span>
Copyright
Copyright 2015, Alexander Kuznetsov <alexkuz@gmail.com>
Markdown-It:
Copyright (c) 2014 Vitaly Puzrin <vitaly@rcdesign.ru>, Alex Kocharin <alex@kocharin.ru>