react-universal-markdown

Markdown component for Web and Native powered by CommonMark

npm install react-universal-markdown

Usage

With React DOM

import React, { Component } from 'react'
import Markdown from 'react-universal-markdown/dom'

export default class App extends Component {
  render() {
    return (
      <Markdown>{`
        Your markdown text
      `}</Markdown>
    )
  }
}

With React Native

import React, { Component } from 'react'
import Markdown from 'react-universal-markdown/native'

export default class App extends Component {
  render() {
    return (
      <Markdown>{`
        Your markdown text
      `}</Markdown>
    )
  }
}

API

DOMMarkdown

Props

...Markdown Props

• className to be added to the Document element. Other elements should be styled by CSS descendent selector. string]

DOMComponents

DOMMarkdown default components prop value

NativeMarkdown

Props

...Markdown Props

• styles styles to be applied to each element by type

{
    Text : number | Object,
    Em : number | Object,
    Strong : number | Object,
    Link : number | Object,
    Image : number | Object,
    Code : number | Object,
    Paragraph : number | Object,
    BlockQuote : number | Object,
    Item : number | Object,
    List : number | Object,
    Heading : number | Object,
    CodeBlock : number | Object,
    ThematicBreak : number | Object,
    Document : number | Object,
}

NativeComponents

NativeComponents default components prop value

Markdown

Props

• customizer a function to modify the parsed elements tree (AST). Executed for each level of the tree. (children, render) => renderedChildren
• children a markdown string
• components to be used for rendering markdown.

{
    Text : Class<Component> | (props) => ReactElement,
    Em : Class<Component> | (props) => ReactElement,
    Strong : Class<Component> | (props) => ReactElement,
    Link : Class<Component> | (props) => ReactElement,
    Image : Class<Component> | (props) => ReactElement,
    Code : Class<Component> | (props) => ReactElement,
    Paragraph : Class<Component> | (props) => ReactElement,
    BlockQuote : Class<Component> | (props) => ReactElement,
    Item : Class<Component> | (props) => ReactElement,
    List : Class<Component> | (props) => ReactElement,
    Heading : Class<Component> | (props) => ReactElement,
    CodeBlock : Class<Component> | (props) => ReactElement,
    ThematicBreak : Class<Component> | (props) => ReactElement,
    Document : Class<Component> | (props) => ReactElement,
}