longphung / react-components-markdown

React control to draw interactive documentation, markdown + react components

Notice

This library is highly outdated, IMO markdown-in-js is much more better, please use it.

React Components Markdown

React component to render markdown with React components inside

Example

This library allow to create interactive documentation from md files.

i.e. this html-hint README.md

become this html-hint README with examples

in just few lines of React code

(this library github.io example is also build with this library)

How to

Create readme.md for your component

# Component Help

Lorem ipsum dolor sit amet, consectetur adipiscing elit
[My super example](http://istarkov.github.io/html-hint/#exampleSuperMain)
Duis aute irure dolor in reprehenderit
[My super example with props](http://istarkov.github.io/html-hint/#exampleSuperProps)

Use it in React

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

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

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

Also you can define a custom match regexp

<Markdown
  componentRe={/\[[^\]]*\][^\(]*\(.*github\.io.*#([\w]+)\)/}
...  

Example

This markdown file is also example.

You can use SuperComponent with children

( <SuperComponent>
    HELLO AFRICA
  </SuperComponent> )

My super example, click to view

Or just

( <SuperComponent /> )

My super example 2, click to view

Styling

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
(
<Markdown
  styles={styles}
  ...
)

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

react-components-markdown/lib/markdown.css

(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 [email protected]:istarkov/react-components-markdown.git
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.