Dimer Tree React

Converts dimer markdown AST node to HTML using React

If you are using React to create Dimer theme, then it will be best to use this low level function to convert all markdown AST nodes into HTML.

Installation

npm i dimer-tree-react

# Yarn
yarn add dimer-tree-react

Usage

After installation, import the module and use it as follows.

import React from 'react'
import dimerTree from 'dimer-tree-rect'

class Doc extends React.Component {
  render () {
    return (
      <div>
        ${ tree(markdownAST) }
      </div>
    )
  }
}

Returning custom components

You can also return custom elements or components for certain AST nodes.

import React from 'react'
import dimerTree from 'dimer-tree-react'

class Doc extends React.Component {
  processNode (node) {
    if (node.tag === 'div' && node.props.className === 'tabs') {
      return <Tabs node={node} />
    }
  }

  render () {
    return (
      <div>
        ${ tree(markdownAST, this.processNode) }
      </div>
    )
  }
}

Change log

The change log can be found in the CHANGELOG.md file.

Contributing

Everyone is welcome to contribute. Please take a moment to review the contributing guidelines.

Authors & License

thetutlage and contributors.

MIT License, see the included MIT file.