mdx-live

React Live for fenced code blocks in MDX

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
mdx-live
2.0.0-alpha.25 years ago5 years agoMinified + gzip package size for mdx-live in KB

Readme

mdx-live
Add live code examples to MDX with react-live
npm i mdx-live

import React from 'react'
import { MDXLiveProvider } from 'mdx-live'
import Doc from './doc.mdx'

export default props =>
  <MDXLiveProvider>
    <Doc />
  </MDXLiveProvider>

withMDXLive

Higher order component to render LiveCode component when the language-.jsx class name is present.
import { withMDXLive } from 'mdx-go'

const components = {
  code: withMDXLive('pre'),
  // removes wrapping <pre> tag from MDX
  pre: props => props.children,
}

LiveCode

Styled wrapper around react-live
import { LiveCode } from 'mdx-go'

<LiveCode
  scope={{
    name: 'Jane'
  }}
  code='<h1>Hello {name}</h1>'
/>

Props
  • previewStyle
  • editorStyle
  • errorStyle
  • previewProps
  • editorProps
  • errorProps
  • components
  • scope