@mintsourcejs/mdxjs-react

0.3.2 • Public • Published

mdxjs-react

This package compliments the @mintsourcejs/mdsjx-code-plugin package and @mdx-js/react to provide live editing / running examples in code blocks.

Basic Usage

import { MDXProvider } from "@mdx-js/react";
import { mdxComponents } from "@mintsourcejs/mdxjs-react";

export function App() {
  return (
    <MDXProvider components={mdxComponents}>
      <div className="app">
        {/* ... */}
      </div>
    </MDXProvider>
  )
}

To make things simple, the @mintsourcejs/mdxjs-react plugin exports mdxComponents that can simply be passed to the MDXProvider to wire up the custom components for use in MDX documents.

Advanced Usage

If you want access to modules imported for the code block, you can use the useMdxScope hook. You can use this to write a custom Code component if you want to.

export const Code = ({ children }) => {
    const locals = useMdxScope();

    return (
        <code>{children}</code>
    );
}

/@mintsourcejs/mdxjs-react/

    Package Sidebar

    Install

    npm i @mintsourcejs/mdxjs-react

    Weekly Downloads

    7

    Version

    0.3.2

    License

    MIT

    Unpacked Size

    62 kB

    Total Files

    51

    Last publish

    Collaborators

    • ihenshaw