Skip to content

joesturge/mui-mdx-components

 
 

Repository files navigation

About

This module creates an MDX components object for use with MDXjs and Material UI.

See the example running here https://dev.joesturge.com/mui-mdx-components.

GithubCI Coverage npm version Contributions

Usage

Intended to be used with react:17+ @mui/material:5 and @mdx-js/mdx:2.

This module exports a single method components(options) which is used to create an MDX components object to be passed to an MDXProvider see: https://mdxjs.com/docs/using-mdx/#mdx-provider

Options

You can optionally pass an options object to the components function:

  • overrides - MDXComponents defined here will overwrite the default component
  • propOverrides - Used to override the props which are being passed to the default component
  • Highlighter - If you wish to use react-syntax-highlighter you can pass an implementation for it here and it will be used
  • highlighterStyle - You can supply the Highlighter with a style here and it will override the highlighter default, this can also be a function which takes the mui theme and returns a react-syntax-highlighter style.

Example

import { MDXProvider } from "@mdx-js/react";
import components from "mui-mdx-components";
import { PrismLight as Highlighter } from "react-syntax-highlighter";
import {
  oneDark,
  oneLight,
} from "react-syntax-highlighter/dist/esm/styles/prism";

const options = {
  overrides: {
    h1: CustomElement,
    other: (props) => <span>{prop.children}</span>,
  },
  propOverrides: {
    em: {
      color: "secondary",
    },
  },
  Highlighter,
  highlighterStyle: (theme) =>
    theme.palette.mode === "light" ? oneLight : oneDark,
};

export default (props) => (
  <MDXProvider components={components(options)}>{props.children}</MDXProvider>
);

Supported Components

πŸ—Ή h1
πŸ—Ή h2
πŸ—Ή h3
πŸ—Ή h4
πŸ—Ή h5
πŸ—Ή h6
πŸ—Ή p
πŸ—Ή strong
πŸ—Ή em
πŸ—Ή ul
πŸ—Ή ol
πŸ—Ή li
πŸ—Ή a
πŸ—Ή hr
πŸ—Ή wrapper
πŸ—Ή code
πŸ—Ή pre
πŸ—Ή blockquote
☐ del
☐ input
☐ section
☐ sup
☐ table
☐ tbody
☐ td
☐ th
☐ thead
☐ tr