JSPM

nerv-markdown-loader

0.0.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 18
  • Score
    100M100P100Q53809F
  • License MIT

Webpack loader to render React Components from markdown

Package Exports

  • nerv-markdown-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (nerv-markdown-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

React Markdown

npm version build status dependencies Status devDependencies Status

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

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

webpack.config.js

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

hello-world.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


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

This is an example component

```render html
<HelloWorld />
```

You can send who to say Hello

```render html
<HelloWorld who="World!!!" />
```

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.

Team

Javier Cubides Fernando Pasik
Javier Cubides Fernando Pasik

License

MIT (c) 2017