Merge branch 'master' into organized-docs

CHANGELOG.md

@@ -1,6 +1,10 @@
 
 # Changelog
 
+## v1.5.8 2018-08-04
+
+- Add support for `components` and `Provider` in themes
+
 ## v1.5.7 2018-08-04
 
 - Add more built-in themes

README.md

@@ -187,6 +187,7 @@ which means you can use a nested ThemeProvider or target elements with CSS-in-JS
 
 ### Built-in Layouts
 
+
 mdx-deck includes some built-in layouts for inverting theme colors and changing the layout of a slide. Read more about [built-in layouts](docs/components.md#layouts).
 
 ## Presenter Mode

docs/advanced.md

@@ -3,16 +3,18 @@
 
 ## Custom MDX components
 
-mdx-deck includes default components for MDX, but to provide custom components to the [MDXProvider][], add a `components` object to the `theme.
+mdx-deck includes default components for MDX, but to provide custom components to the [MDXProvider][], add a `components` object to the `theme`.
 
 ```js
 // example theme
 import { theme } from 'mdx-deck/themes'
-import components from './components'
+import Heading from './Heading'
 
 export default {
   ...theme,
-  components
+  components: {
+    h1: Heading
+  }
 }
 ```
 
@@ -21,13 +23,19 @@ at the [default set of components](../src/components.js) as a reference.
 
 ## Custom Provider component
 
-A custom Provider component can be exported to wrap the entire application.
+A custom Provider component can be added to the theme to wrap the entire application.
 This is useful for adding custom context providers in React.
 
-```mdx
-export { default as Provider } from './Provider'
+```js
+// example theme.js
+import { theme } from 'mdx-deck/themes'
+import Provider from './Provider'
 
-# Hello
+export default {
+  ...theme,
+  font: 'Georgia, serif',
+  Provider
+}
 ```
 
 A custom Provider component will receive the application's state as props,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mdx-deck",
-  "version": "1.5.7",
+  "version": "1.5.8",
   "description": "MDX-based slide deck presentations",
   "main": "dist/index.js",
   "bin": {

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