Move custom Provider into main app

src/entry.js

@@ -6,18 +6,15 @@ const mod = require(DOC_FILENAME)
 const slides = mod.default
 const { theme, components, Provider } = mod
 
-const Root = Provider || React.Fragment
-
 export default class App extends React.Component {
   render () {
     return (
-      <Root>
       <SlideDeck
         slides={slides}
         theme={theme}
         components={components}
+        Provider={Provider}
       />
-      </Root>
     )
   }
 }

src/index.js

@@ -4,7 +4,7 @@ import { MDXProvider } from '@mdx-js/tag'
 import { ThemeProvider } from 'styled-components'
 import debounce from 'lodash.debounce'
 
-import { Provider } from './context'
+import { Provider as ContextProvider } from './context'
 import Carousel from './Carousel'
 import Slide from './Slide'
 import Dots from './Dots'
@@ -43,6 +43,7 @@ export class SlideDeck extends React.Component {
     slides: [],
     theme: defaultTheme,
     components: {} ,
+    Provider: props => <React.Fragment children={props.children} />,
     width: '100vw',
     height: '100vh',
     ignoreKeyEvents: false
@@ -147,6 +148,7 @@ export class SlideDeck extends React.Component {
       slides,
       theme,
       components,
+      Provider,
       width,
       height
     } = this.props
@@ -163,13 +165,14 @@ export class SlideDeck extends React.Component {
     }
 
     return (
-      <Provider value={context}>
+      <ContextProvider value={context}>
         <ThemeProvider theme={theme}>
           <MDXProvider
             components={{
               ...defaultComponents,
               ...components
             }}>
+            <Provider {...this.state}>
               <Wrapper
                 {...this.state}
                 slides={slides}
@@ -196,9 +199,10 @@ export class SlideDeck extends React.Component {
                   }}
                 />
               </Wrapper>
+            </Provider>
           </MDXProvider>
         </ThemeProvider>
-      </Provider>
+      </ContextProvider>
     )
   }
 }