# roprgm-react-markdown-loader

> Webpack loader to render React Components from markdown

Latest version **1.1.14** (published 2018-05-02) · MIT license · 0 weekly downloads

## Install

```sh
npm install roprgm-react-markdown-loader
pnpm add roprgm-react-markdown-loader
yarn add roprgm-react-markdown-loader
bun add roprgm-react-markdown-loader
```

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.14 |
| Published | 2018-05-02 |
| First published | 2018-05-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Node | >=4.0.0 |
| Dependencies | 5 |
| Unpacked size | 14.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 146 |
| Author | Javier Cubides |
| Maintainers | roprgm |
| Keywords | react, styleguide, webpack, loader, markdown |

## Links

- npm: https://www.npmjs.com/package/roprgm-react-markdown-loader
- Repository: https://github.com/javiercf/react-markdown-loader
- Issues: https://github.com/javiercf/react-markdown-loader/issues
- npm.io page: https://npm.io/package/roprgm-react-markdown-loader

## Dependencies (5)

- [except](https://npm.io/package/except.md) ^0.1.3
- [camelize](https://npm.io/package/camelize.md) ^1.0.0
- [remarkable](https://npm.io/package/remarkable.md) ^1.7.1
- [front-matter](https://npm.io/package/front-matter.md) ^2.1.2
- [node-prismjs](https://npm.io/package/node-prismjs.md) ^0.1.0

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

- 1.1.14 (latest) — 2018-05-02

## README

React Markdown
==================

[![npm version](https://img.shields.io/npm/v/react-markdown-loader.svg)](https://www.npmjs.com/package/react-markdown-loader)
[![build status](https://travis-ci.org/javiercf/react-markdown-loader.svg?branch=master)](https://travis-ci.org/javiercf/react-markdown-loader)
[![dependencies Status](https://david-dm.org/javiercf/react-markdown-loader/status.svg)](https://david-dm.org/javiercf/react-markdown-loader)
[![devDependencies Status](https://david-dm.org/javiercf/react-markdown-loader/dev-status.svg)](https://david-dm.org/javiercf/react-markdown-loader?type=dev)

Webpack loader that parses markdown files and converts them to a React Stateless Component.
It will also parse FrontMatter to import dependencies and render components
along with it’s source code.

We developed this loader to make the process of creating styleguides for
React components easier.

## Usage

In the FrontMatter you should import the components you want to render
with the component name as a key and it's path as the value

```markdown
---
imports:
  HelloWorld: './hello-world.js',
  '{ Component1, Component2 }': './components.js'
---
```

*webpack.config.js*
```js
module: {
  loaders: [
    {
      test: /\.md$/,
      loader: 'babel!react-markdown'
    }
  ]
}
```

*hello-world.js*
```js
import React, { PropTypes } from 'react';

/**
 * HelloWorld
 * @param {Object} props React props
 * @returns {JSX} template
 */
export default function HelloWorld(props) {
  return (
    <div className="hello-world">
      Hello { props.who }
    </div>
  );
}

HelloWorld.propTypes = {
  who: PropTypes.string
};

HelloWorld.defaultProps = {
  who: 'World'
};

```
In the markdown File add the *render* tag to code fenceblocks you want the
loader to compile as Components this will output the usual highlighted code
and the rendered component.

*hello-world.md*

<pre>

---
imports:
  HelloWorld: './hello-world.js'
---
# Hello World

This is an example component

```render html
&lt;HelloWorld /&gt;
```

You can send who to say Hello

```render html
&lt;HelloWorld who="World!!!" /&gt;
```

</pre>

## Contributing

Pull requests and stars are always welcome. For bugs and feature requests, [please create an issue](../../issues/new).

## Team

[![Javier Cubides](https://avatars.githubusercontent.com/u/3386811?s=130)](https://github.com/javiercf) | [![Fernando Pasik](https://avatars.githubusercontent.com/u/1301335?s=130)](https://fernandopasik.com)
---|---
[Javier Cubides](https://github.com/javiercf) | [Fernando Pasik](https://fernandopasik.com)

## License

MIT (c) 2017

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