rozzzly / markdown-it-react-renderer

React renderer for Markdown-it

Markdown React

Markdown to React Component converter.

This project uses Markdown parser from Markdown It library, but loosely supports its plugins.

Examples

Basic example

import MDReactComponent from 'markdown-react-js';

...

render() {
  return (
    <MDReactComponent text='Some text **with emphasis**.' />   
  );
}

or, using function instead of component:

import { mdReact } from 'markdown-react-js';

...

render() {
  return mdReact()('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'
}

...

render() {
  return (
    <MDReactComponent text='Some **bold** and *italic* text.' tags={TAGS} />   
  );
}

Result:

<span>
  <p>
    Some <b>bold</b> and <i>italic</i> text.
  </p>
</span>

Using custom component renderer

function handleIterate(Tag, props, children, level) {
  if (level === 1) {
    props = {
      ...props,
      className: 'first-level-class'
    };
  }

  if (Tag === 'a') {
    props = {
      ...props,
      className: 'link-class',
      href: props.href.replace('SOME_URL', 'http://example.com')
    };
  }

  return <Tag {...props}>{children}</Tag>;
}

...

render() {
  return (
    <MDReactComponent text='[This link](SOME_URL) has it’s own style.' onIterate={handleIterate} />   
  );
}

Result:

<span>
  <p class="first-level-class">
    <a href="http://example.com" class="link-class">This link</a> has it’s own style.
  </p>
</span>

Copyright

Forked from

• markdown-react-js Copyright 2015 Alexander Kuznetsov [email protected]

• Markdown-it Copyright (c) 2014 Vitaly Puzrin [email protected], Alex Kocharin [email protected]

LICENSE

MIT