Meet npm Pro: unlimited public & private packages + package-based permissions.Learn more »

@mdx-js/loader

1.5.5 • Public • Published

@mdx-js/loader

Build Status lerna Join the community on Spectrum

Webpack loader for MDX.

Installation

npm:

npm i -D @mdx-js/loader

Usage

// ...
module: {
  rules: [
    // ...
    {
      test: /\.mdx?$/,
      use: [
        'babel-loader',
        '@mdx-js/loader'
      ]
    }
  ]
}

The renderer option specifies a string that will be prepended to the generated source allowing for the use of any createElement implementation. By default, that string is:

import React from 'react'
import { mdx } from '@mdx-js/react'

Using the renderer option, one can swap out React for another implementation. The example below wraps a generic JSX compatible function named h.

const renderer = `
import { h } from 'generic-implementation'
 
const mdx = (function (createElement) {
  return function (name, props, ...children) {
    if (typeof name === 'string') {
      if (name === 'wrapper') return children.map(createElement)
      if (name === 'inlineCode') return createElement('code', props, ...children)
    }
 
    return createElement(name, props, ...children)
  }
}(h))
`
 
// ...
module: {
  rules: [
    // ...
    {
      test: /\.mdx?$/,
      use: [
        'babel-loader',
        {
          loader: '@mdx-js/loader'
          options: {
            renderer,
          }
        }
      ]
    }
  ]
}

For more information on why this is required, see this post.

Contribute

See the Support and Contributing guidelines on the MDX website for ways to (get) help.

This project has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.

License

MIT © Compositor and ZEIT

Install

npm i @mdx-js/loader

Version

1.5.5

License

MIT

Unpacked Size

5.26 kB

Total Files

4

Homepage

mdxjs.com

Last publish

Collaborators

  • avatar
  • avatar
  • avatar
  • avatar