md-to-react

md-to-react

Webpack loader for parsing Markdown into React elements.
This package requires a project with a configured Webpack build.

$ npm i md-to-react -S

markdown.md

---
description: optional yaml metadata
---
# Header

A paragraph about what's been discussed in this post.
Followed by a custom component.

<customComponent number='{22}' text='words' JSON='{{"key": "value"}}'/>

Example.js

import React from 'react'
# import some custom components to be used on the parsed markdown
import {P, CustomComponent} from './custom'

# use the webpack loader to parse the markdown file
import file from 'md-to-react!./markdown.md'

# the component hash will have its first letter lowered when rendered
const componentHash = {P, CustomComponent}

export default class Example extends React.Component {
  render() {
    return <div>
      # the meta-data will be available on the
      # object returned from the loader
      <h6>{file.description}</h6>
      # the render function will create the react elements
      # using the components it received,
      # when a component isn't found on the hash
      # a tag with its name is rendered
      # the returned elements are wrapped on a <div/>
      {file.render(componentHash)}
    </div>
  }
}

One limitation of the parser is that the html tags need to have the first letter lowercased, the render function will lowercase the first letters of the componentHash keys before executing.

This package uses js-yaml for parsing the optional yaml header, Commonmark for parsing the markdown text and Babel for transforming the html into react element calls. All the heavy lifting is done on the build phase, the render call on the front-end applies the custom components to the code generated previously.

This page was rendered using md-to-react and the components from the Stijl lib.