remark-mdx-imports

Remark plugin to automatically import exported MDX components.

Content

• Content
• What is this?
• When should I use this?
• Install
• Use
  • Options
    • file?: string

What is this?

This package is a remark plugin that helps with MDX files.

When should I use this?

If you want to remove technical clutter from your MDX files by pre-defining a set of known JSX components for your MDX files, that you can use without explicitly importing them, then this plugin will add these imports for you.

Install

This package is ESM only. In Node.js (version 12.20+, 14.14+, or 16.0+), install with npm:

npm install remark-mdx-imports

Use

import remarkMdx from 'remark-mdx';
import remarkMdxImports from 'remark-mdx-imports';
import remarkParse from 'remark-parse';
import { unified } from 'unified';

const processor = unified() //
  .use(remarkParse)
  .use(remarkMdx)
  .use(remarkMdxImports);

This markdown:

<Title text="Hello, world!" />

<Hero>
  I **am** a hero!
</Hero>

with this _components.ts file:

export { Hero } from './Hero';
export { Title } from './Title';

would compile without issues, using the exported components from _components.ts automatically.

Options

file?: string

Name of the file to lookup pre-defined component exports.