Merge pull request #71 from busypeoples/components-providers-themes

Move external provider and components into theme

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,

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