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
;;; <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
;// There are many color schemas for highlight choose any; // combine styles into oneconst 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 git@github.com:istarkov/react-components-markdown.gitcd react-components-markdownnpm installnpm run start
And goto in browser to localhost:4000
You will get hot reloadable env, to create your React Component.