@devdigital/markdown-front-matter-loader v0.1.0

markdown-react-loader

markdown-react-loader allows you to use simple React components within your Markdown documents, which is useful for consistent presentation of common content.

The loader takes Markdown as input and returns updated Markdown as output. React code sections containing React component markup are replaced with the rendered output of the corresponding component. It is intended that the loader is used before another Markdown loader for additional processing.

Getting Started

Install

' install Webpack (2.x)
npm i webpack --save-dev                           
' install React
npm i react react-dom --save                       
' install markdown react loader
npm i @devdigital/markdown-react-loader --save-dev 
' install additional Markdown processing loaders
npm i markdown-loader html-loader --save-dev

Note that you can use any Markdown loader to continue processing the output from markdown react loader. For example, markdown-loader or markdown-it-loader.

Configure Webpack

Update your Webpack configuration to include the appropriate markdown loaders for *.md files. The markdown-react-loader should come before any other Markdown (and HTML) loader:

{
  test: /\.md$/,
  exclude: /node_modules/,
  use: [
    {
      loader: 'html-loader'
    },
    {
      loader: 'markdown-loader'
    },
    {
      loader: '@devdigital/markdown-react-loader',
      options: {
        components: path.resolve(__dirname, './components')
      }
    }
  ]
}

The markdown-react-loader options must include a components property which is the path to a folder containing your React components. Components are matched up by convention, so when you use <Example .. /> within your Markdown, the loader expects to find a corresponding Example.jsx file within your components path which exports your Example React component. Props used within the Markdown are mapped to the component props.

Create a component

Within your components folder specified by the components loader options property, create a React component, e.g. Example.jsx:

import React from 'react'

const Example = ({ text }) =>
  <div><p>{text}</p></div>

export default Example

Write Markdown react sections

Within your markdown file, you can now write react sections to use your component:

Import your markdown file

import React from 'react'
import ReactDOM from 'react-dom'
import example form './example.md'

// example contains rendered HTML output from the Markdown, 
// including the output of the Example React component render function inline.
ReactDOM.render(
  <div dangerouslySetInnerHTML={{ __html: example }}></div>,
  document.getElementById('root')
)