react-app-rewire-frontmatter-markdown

react-app-rewire-frontmatter-markdown

Add frontmatter-markdown-loader to create-react-app with react-app-rewired. You create-react-app project can import FrontMatter Markdown as React Component/HTML + FrontMatter Atrributes 🔌

Usage

yarn add -D react-app-rewire-frontmatter-markdown

Configuration

In config-overrides.js for react-app-rewired:

const rewireFrontmatterMarkdown = require('react-app-rewire-frontmatter-markdown');

module.exports = function override(config, env) {
  rewireFrontmatterMarkdown(config); // <-- THIS
  return config;
}

This inserts the loader config for /\.md$/.

Options

You can give your own options through the second argument.

const rewireFrontmatterMarkdown = require('react-app-rewire-frontmatter-markdown');

module.exports = function override(config, env) {
  // THIS
  rewireFrontmatterMarkdown(
    config,
    {
      mode: ['html', 'react'],
      markdownIt: {
        html: true,
        linkify: true,
        breaks: true
      }
    }
  );
  return config;
}

Full documentation for frontmatter-markdown-loader is in: https://hmsk.github.io/frontmatter-markdown-loader/options

Default option for frontmatter-markdown-loader is

{
  mode: ['react']
}

License

MIT License, Copyright 2019-present Kengo Hamasaki