herschel666/hops-mdx

MDX support for Hops applications.

hops-mdx

Please see the main Hops Readme for general information and a Getting Started Guide.

This is a preset for Hops that brings MDX support to your application.

Installation

This preset must be used together with the hops-react preset.

npm install --save hops-mdx

If you don't already have an existing Hops project read this section on how to set up your first Hops project.

Basic usage

Create a file src/content.mdx:

# Hello World!

This **is** a _paragraph_.

Then import it as a component in your src/app.js:

import React from 'react';
import { render } from 'hops';
import Content from './content.mdx';

export default render(<Content />);

This will render a single Hops page with the content:

<h1>Hello World!</h1>
<p>This <strong>is</strong> a <em>paragraph</em>.</p>

For advanced usage, check out the MDX documentation.

Registering plugins

MDX supports Remark plugins. To register them, define a mdx.remarkPlugins-property on your Hops preset configuration.

To e.g. enable remark-emoji support, add the following value to your Hops config:

{
  "mdx": {
    "remarkPlugins": ["remark-emoji"]
  }
}

hops-mdx will then convert emojis, marked by using the colon syntax (:emoji:), into real UTF-8 emojis. You can also pass in options, if the plugin provides that feature:

{
  "mdx": {
    "remarkPlugins": [["remark-emoji", { "padSpaceAfter": true }]]
  }
}

Note that the plugin's name and config object is wrapped into its own array!

Testing

In order to enable you to test components properly that import MDX, there's a helper that brings MDX support to the Jest environment of your Hops application.

Installation

This helper should be used alongside jest-preset-hops.

npm install --save-dev hops-mdx-jest

Usage

To use the helper, extend your Jest configuration like this:

{
  "jest": {
    "preset": "jest-preset-hops",
    "transform": {
      "\\.mdx?$": "hops-mdx-jest"
    }
  }
}

Now your MDX components will e.g. be fully rendered into snapshot tests.

License

MIT @ Emanuel Kluge