React component to render markdown with React components inside

Usage no npm install needed!

<script type="module">
  import reactComponentsMarkdown from '';


Build Status

React Components Markdown

React component to render markdown with React components inside


This library allow to create interactive documentation from md files.

i.e. this html-hint

become this html-hint README with examples

in just few lines of React code

(this library example is also build with this library)

How to

Create for your component

# Component Help

Lorem ipsum dolor sit amet, consectetur adipiscing elit
[My super example](
Duis aute irure dolor in reprehenderit
[My super example with props](

Use it in React

import readme from './';
import Markdown from 'react-components-markdown';
import MySuperReactExample from './my-super-react-example';

export default () => (
    exampleSuperMain={<MySuperReactExample />}
    exampleSuperProps={<MySuperReactExample a={1} b={2} />}

Component will replace all refs to into React elements, mapping hashes to Markdown element props.

Also you can define a custom match regexp



This markdown file is also example.

You can use SuperComponent with children

( <SuperComponent>
  </SuperComponent> )

My super example, click to view

Or just

( <SuperComponent /> )

My super example 2, click to view


If you are using or want to use css-modules

Setup your webpack loader for css as here

Install github-markdown-css and highlight.js for default styles.

Import styles from installed libraries

import githubCss from 'github-markdown-css/github-markdown.css';
// There are many color schemas for highlight choose any
import hlJsCss from 'highlight.js/styles/github.css';

// combine styles into one
const styles = {...githubCss, ...hlJsCss};

// use styles as Markdown property

If you are not using css-modules, just include css from this project


(all classes are hashed like .github-markdown__markdown-body__b21c5 so will not pollute your styles)

Use this project as boilerplate for hot reloadable libraries with documentation

git clone
cd react-components-markdown
npm install
npm run start

And goto in browser to localhost:4000

You will get hot reloadable env, to create your React Component.