diff --git a/README.md b/README.md index 5150cc3..74338c9 100644 --- a/README.md +++ b/README.md @@ -235,10 +235,19 @@ To see available syntax styles and languages, see: ### Custom Components -mdx-deck includes default components for MDX, but to provide custom components to the [MDXProvider][], export a `components` object. +mdx-deck includes default components for MDX, but to provide custom components to the [MDXProvider][], add `components` to the theme settings. -```mdx -export { default as components } from './components' +```js +import { theme } from 'mdx-deck/themes' +import Heading from './Heading' + +const theme = { + ...theme, + font: 'Georgia, serif', + components: { + h1: Heading + } +} # Custom Components ``` @@ -358,13 +367,18 @@ export default SplitRight ### Custom Provider -A custom Provider component can be exported to wrap the entire application. +A custom Provider component can be added to theme settings to wrap the entire application. This is useful for adding custom context providers in React. -```mdx -export { default as Provider } from './Provider' +```js +import { theme } from 'mdx-deck/themes' +import Provider from './Provider' -# Hello +const theme = { + ...theme, + font: 'Georgia, serif', + Provider +} ``` A custom Provider component will receive the application's state as props, diff --git a/src/index.js b/src/index.js index 409b21d..5e85877 100644 --- a/src/index.js +++ b/src/index.js @@ -66,8 +66,8 @@ const keys = { export class SlideDeck extends React.Component { static propTypes = { slides: PropTypes.array.isRequired, - components: PropTypes.object, theme: PropTypes.object, + components: PropTypes.object, Provider: PropTypes.func, width: PropTypes.string, height: PropTypes.string, @@ -201,13 +201,18 @@ export class SlideDeck extends React.Component { const { slides, theme, - components, - Provider, + components: propsComponents, + Provider: PropsProvider, width, height } = this.props const { index, length, mode, step} = this.state + const { + components = propsComponents, + Provider = PropsProvider + } = theme + const Wrapper = mode === modes.presenter ? Presenter : Root