@mdx-js/runtime

    1.6.22 • Public • Published

    @mdx-js/runtime

    Build Status lerna Chat

    Parse and render MDX in a runtime environment.

    ⚠️ warning: this is not the preferred way to use MDX since it introduces a substantial amount of overhead and dramatically increases bundle sizes. It should also not be used with user input that isn’t sandboxed.

    Installation

    npm:

    npm i -S @mdx-js/runtime

    Usage

    Props

    The MDX Runtime component accepts two props:

    Name Description
    components Globally available components for the runtime
    scope Variables that are accessible in the JSX portion of the document
    remarkPlugins Array of remark plugins

    Example code

    import React from 'react'
    import MDX from '@mdx-js/runtime'
    
    // Provide custom components for markdown elements
    const components = {
      h1: props => <h1 style={{color: 'tomato'}} {...props} />,
      Demo: props => <h1>This is a demo component</h1>
    }
    
    // Provide variables that might be referenced by JSX
    const scope = {
      some: 'value'
    }
    
    const mdx = `
    # Hello, world!
    
    <Demo />
    
    <div>Here is the scope variable: {some}</div>
    `
    
    export default () => (
      <MDX components={components} scope={scope}>
        {mdx}
      </MDX>
    )

    Contribute

    See the Support and Contributing guidelines on the MDX website for ways to (get) help.

    This project has a Code of Conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.

    License

    MIT © Compositor and Vercel

    Install

    npm i @mdx-js/runtime

    Homepage

    mdxjs.com

    DownloadsWeekly Downloads

    61,740

    Version

    1.6.22

    License

    MIT

    Unpacked Size

    17.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • johno
    • silvenon
    • timneutkens
    • wooorm