How to use @mdx-js/react - 6 common examples

export default ({
  code,
  scope = defaultScope,
  mdx,
  editable = true,
  className,
  ...props
}) => {
  const theme = useContext(ThemeContext)
  const components = useMDXComponents()

  const fullScope = { ...scope, ...components }
  delete fullScope.delete // TODO: Better handle this

  return (

module.exports = function MDXRenderer({
  scope,
  components,
  children,
  ...props
}) {
  const mdxComponents = useMDXComponents(components);
  const mdxScope = useMDXScope(scope);

  // Memoize the compiled component
  const End = React.useMemo(
    () => {
      if (!children) {
        return null;
      }

      const fullScope = {
        // React is here just in case the user doesn't pass them in
        // in a manual usage of the renderer
        React,
        mdx,
        ...mdxScope
      };

export function MDXRenderer({ scope, components, children, ...props }) {
  const mdxComponents = useMDXComponents(components);
  const mdxScope = useMDXScope(scope);

  if (!children) {
    return null;
  }

  const fullScope = {
    // React is here just in case the user doesn't pass them in
    // in a manual usage of the renderer
    React,
    mdx,
    ...mdxScope
  };

  // children is pre-compiled mdx
  children = children.replace(/_frontmatter: _frontmatter/gm, '');

})

const components = Object.entries(componentsAndGuards)
  .map(([name, arr]) => {
    return {
      [name]: componentFromGuards(
        arr.concat({ guard: undefined, Component: name })
      ),
    }
  })
  .reduce((acc, obj) => {
    return { ...acc, ...obj }
  }, {})

// merge any components in wrapRootElement above this wrapRoot
const MDXConsumer = withMDXComponents(
  ({ components: componentsFromContext, children }) => (
    
      
        {children}
      
    
  )
)

const WrapRootElement = ({ element }) => {element}

export default WrapRootElement

export default ({ children, live, removeFragment }) => {
  const components = useMDXComponents();

  const liveProviderProps = {
    transformCode: code => (removeFragment ? code : `<>${code}`),
    scope: { mdx, ...components },
  };

  if (live) {
    return (

}, React.createElement("div", {
                      className: "w-full text-night font-base"
                    }, React.createElement(Navigation.make, {
                          isOverlayOpen: match$1[0],
                          toggle: (function (param) {
                              return Curry._1(setIsOpen, (function (prev) {
                                            return !prev;
                                          }));
                            }),
                          route: router.route
                        }), React.createElement("div", {
                          className: "flex justify-center"
                        }, React.createElement("main", {
                              className: "mt-32 lg:align-center w-full px-4 max-w-xl ",
                              style: minWidth
                            }, React.createElement(React$1.MDXProvider, {
                                  components: components,
                                  children: React.createElement("div", {
                                        className: "w-full max-w-lg"
                                      }, children)
                                }))))));
}