remark-importless-jsx

Remark plugin to automatically import defined JSX 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.

When should I use this?

If you want 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 importing them.

Install

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

npm install remark-importless-jsx

Use

import rehypeStringify from 'rehype-stringify';
import remarkImportlessJsx from 'remark-importless-jsx';
import remarkDirective from 'remark-directive';
import remarkParse from 'remark-parse';
import remarkRehype from 'remark-rehype';
import { unified } from 'unified';

const processor = unified()
  .use(remarkParse)
  .use(remarkMdx)
  .use(remarkImportlessJsx)
  .use(remarkRehype)
  .use(rehypeStringify);

This markdown:

with this _components.ts file:

import { Hero } from '../components/Hero';

would yield this HTML:

<h1>Astro Docs</h1>
<div></div>
<p>Paragraph 1 with <strong class="text-red">strong emphasis</strong>.</p>
<div class="bg-accent decent">
  <h2>Chapter 1</h2>
  <p>A lot of text here.</p>
</div>
<ul class="nav">
  <li>Home</li>
  <li>Blog</li>
  <li>Docs</li>
</ul>

Options

file?: string

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