mdx-deck/docs/react.md

React API

The core mdx-deck components can also be used in any React application, such as create-react-app or next.js.

Webpack Loader

mdx-deck uses a custom webpack loader to split MDX files into an array of slides. Use this loader to import mdx files in a webpack application.

// example webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.mdx$/,
        ignore: /node_modules/,
        use: [
          'babel-loader',
          'mdx-deck/loader'
        ]
      }
    ]
  }
}

SlideDeck Component

import React from 'react'
import { SlideDeck } from 'mdx-deck'
import slides from './deck.mdx'
import theme from './theme'

export default () =>
  <SlideDeck
    slides={slides}
    theme={theme}
    width='100vw'
    height='100vh'
  />

View the source for other components available for use.