# react-components-markdown

> [![Build Status](https://travis-ci.org/istarkov/react-components-markdown.svg?branch=master)](https://travis-ci.org/istarkov/react-components-markdown)

Latest version **0.2.0** (published 2016-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-components-markdown
pnpm add react-components-markdown
yarn add react-components-markdown
bun add react-components-markdown
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2016-04-07 |
| First published | 2016-02-16 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Known vulnerabilities | 0 (+3 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 41 |
| Author | istarkov https://github.com/istarkov |
| Maintainers | istarkov |

## Links

- npm: https://www.npmjs.com/package/react-components-markdown
- Repository: https://github.com/istarkov/react-components-markdown
- Homepage: https://github.com/istarkov/react-components-markdown#readme
- Issues: https://github.com/istarkov/react-components-markdown/issues
- npm.io page: https://npm.io/package/react-components-markdown

## Dependencies (5)

- [lodash](https://npm.io/package/lodash.md) ^4.3.0
- [fsevents](https://npm.io/package/fsevents.md) ^1.0.8
- [recompose](https://npm.io/package/recompose.md) ^0.15.0
- [markdown-it](https://npm.io/package/markdown-it.md) ^6.0.0
- [highlight.js](https://npm.io/package/highlight.js.md) ^9.1.0

## Recent versions

- 0.2.0 (latest) — 2016-04-07
- 0.1.3 — 2016-03-02
- 0.1.2 — 2016-02-23
- 0.1.1 — 2016-02-16
- 0.1.0 — 2016-02-16

## README

[![Build Status](https://travis-ci.org/istarkov/react-components-markdown.svg?branch=master)](https://travis-ci.org/istarkov/react-components-markdown)

# 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](https://github.com/istarkov/html-hint/blob/master/README.md)

become this [html-hint README with examples](http://istarkov.github.io/html-hint/)

in just few lines of [React code](https://github.com/istarkov/html-hint/blob/master/example/components/Page.js#L15-L32)

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

## How to

Create `readme.md` for your component

```md
# 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

```javascript
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

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

## Example

This markdown file is also example.

You can use SuperComponent with children

```javascript
( <SuperComponent>
    HELLO AFRICA
  </SuperComponent> )
```

[My super example, click to view](http://istarkov.github.io/react-components-markdown/#exampleMain)

Or just

```javascript
( <SuperComponent /> )
```

[My super example 2, click to view](http://istarkov.github.io/react-components-markdown/#exampleSecondary)


## Styling

If you are using or want to use [css-modules](https://github.com/css-modules/css-modules)

Setup your webpack loader for css as [here](https://github.com/istarkov/react-components-markdown/blob/master/config/loaders.js#L38-L44)

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

Import styles from installed libraries

```javascript
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

```bash
git clone git@github.com: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.

---
_Source: https://npm.io/package/react-components-markdown · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._