Nocturnal Programmer's Machine
    Wondering what’s next for npm?Check out our public roadmap! »

    markdown-it-react-renderer

    0.1.1 • Public • Published

    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

    LICENSE

    MIT

    Install

    npm i markdown-it-react-renderer

    DownloadsWeekly Downloads

    12

    Version

    0.1.1

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar