mdx-frontmatter-loader

frontmatter loader for @mdx-js

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
mdx-frontmatter-loader
0.1.14 years ago4 years agoMinified + gzip package size for mdx-frontmatter-loader in KB

Readme

mdx-frontmatter-loader
Use to add front-matter to @mdx-js exports.
Dependencies:
  • remark-frontmatter
  • front-matter

Config

{
  test: /\.md$/,
  use: [
    'babel-loader',
    {
      // Adds frontmatter to export
      loader: 'mdx-frontmatter-loader',
    },
    {
      loader: '@mdx-js/loader',
      options: {
        mdPlugins: [
          [
            // Remove frontMatter from body output
            require('remark-frontmatter'), 
            { type: 'yaml', marker: '-', fence: '---' },
          ],
        ],
      },
    },
  ],
},

Usage

Import both Mdx component and frontmatter attributes:
import WhateverMarkdown, { attributes as whateverMetadata } from './whatever.md'

Then use in JSX like so:
<h1>{ whateverMetadata.title }</h1>
<WhateverMarkdown />

MIT (c) some1else