# markdown-to-react-components

> Convert markdown into react components

Latest version **0.2.4** (published 2017-02-22) · MIT license · 0 weekly downloads

## Install

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

## 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.4 |
| Published | 2017-02-22 |
| First published | 2015-07-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 (+3 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 132 |
| Author | Christian Alfoni |
| Maintainers | christianalfoni, kitze |
| Keywords | react, markdown, convert |

## Links

- npm: https://www.npmjs.com/package/markdown-to-react-components
- Repository: https://github.com/christianalfoni/markdown-to-react-components
- Issues: https://github.com/christianalfoni/markdown-to-react-components/issues
- npm.io page: https://npm.io/package/markdown-to-react-components

## Dependencies (2)

- [he](https://npm.io/package/he.md) ^1.1.0
- [marked](https://npm.io/package/marked.md) ^0.3.3

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.2.4 (latest) — 2017-02-22
- 0.2.3 — 2017-01-03
- 0.2.2 — 2016-11-30
- 0.2.1 — 2016-06-27
- 0.2.0 — 2016-02-02
- 0.1.4 — 2015-12-28
- 0.1.3 — 2015-11-22
- 0.1.2 — 2015-11-22
- 0.1.1 — 2015-07-23
- 0.1.0 — 2015-07-08

## README

# markdown-to-react-components
Convert markdown into react components

## Whats different?
There are several projects that claims to convert markdown using React, but that is not exactly right. They produce one single React component with some plain markdown converted HTML in it. They do not produce React components of the markdown syntax. **But this project does!**

## Features
- Converts markdown syntax to React components. It is a lot more performant on live changes
- Define your own components to be used as headers, lists etc.
- Code highlighting using Prism.js
- Also returns a TOC (Table Of Contents), based on headers used
- TOC and Header ids match so that you can use anchor links (<a href="#my-heading>My heading</a>)

## Install
`npm install markdown-to-react-components`

## How to use
```js
import React from 'react';
import MTRC from 'markdown-to-react-components';

MTRC.configure({
  h1: React.createClass({
    render() {
      return <h1 id={this.props.id} style={{color: 'red'}}>{this.props.children}</h1>
    }
  })
});

const Editor = React.createClass({
  getInitialState() {
    return {
      content: null
    };
  },
  onTextareaChange(event) {
    this.setState({
      content: MTRC(event.target.value).tree
    });
  },
  render() {
    return (
      <div>
        <div>{this.state.content}</div>
        <textarea onChange={this.onTextareaChange}/>
      </div>
    );
  }
});

export default Editor;
```

## Code highlight
You will have to include the [Prism.js](https://prismjs.com/) library and its css manually in your project. Look in the example app to see how this is done.

```js

    ```javascript
    var foo = 'bar';
    ```

    ```html
    <h1>Hello world!</h1>
    ```

```
Supported languages can be found over at [prism.js](https://prismjs.com/).

## API

### Configure
Allows you to configure custom elements for your markdown.

```js
MTRC.configure({
  h1: React.createClass({
    render() {
      return <h1 style={{color: 'red'}}>{this.props.children}</h1>
    }
  })
});
```

- **h1**: this.props.children, this.props.id
- **h2**: this.props.children, this.props.id
- **h3**: this.props.children, this.props.id
- **h4**: this.props.children, this.props.id
- **blockquote**: this.props.children
- **hr**: -
- **ol**: this.props.children
- **ul**: this.props.children
- **p**: this.props.children
- **table**: this.props.children
- **tr**: this.props.children
- **th**: this.props.children
- **td**: this.props.children
- **td**: this.props.children
- **a**: this.props.children, this.props.href, this.props.title, this.props.target
- **strong**: this.props.children
- **em**: this.props.children
- **br**: -
- **del**: this.props.children
- **img**: this.props.src, this.props.alt
- **code**: this.props.language, this.props.code
- **codespan**: this.props.children

### Convert
```js
MTRC('# Hello there').tree // React virtual dom tree
MTRC('# Hello there').toc // [{children: [], level: 1, title: 'Hello there', id: 'hello-there'}]
```

## Run demo
- `npm install`
- `npm start`
- Go to: `http://localhost:8080/webpack-dev-server/bundle`

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