Add basic context setup

docs/index.mdx

@@ -1,5 +1,5 @@
 export { future as theme } from '../src/themes'
-import { Image } from '../src'
+import { Image, Notes } from '../src'
 import Layout from './Layout'
 
 # mdx-deck
@@ -36,6 +36,11 @@ import Box from 'superbox'
 ```
 <button>code example</button>
 ```
+
+<Notes>
+  Hi this is some notes
+</Notes>
+
 ---
 > “Blockquotes are essential to any good presentation”
 

src/Notes.js

@@ -0,0 +1,17 @@
+import React from 'react'
+import { withDeck } from './context'
+import { withSlide } from './Slide'
+
+export default withDeck(withSlide(class extends React.Component {
+  componentDidUpdate () {
+    console.log(
+      this.props.children,
+      this.props.slide,
+      this.props.deck
+    )
+  }
+
+  render () {
+    return false
+  }
+}))

src/Slide.js

@@ -1,7 +1,20 @@
+import React from 'react'
 import styled from 'styled-components'
 import { space, color } from 'styled-system'
 
-export const Slide = styled.div([], {
+const Context = React.createContext(null)
+
+export const withSlide = Component => props =>
+  <Context.Consumer>
+    {slide => (
+      <Component
+        {...props}
+        slide={slide}
+      />
+    )}
+  </Context.Consumer>
+
+const Root = styled.div([], {
   flex: 'none',
   display: 'flex',
   alignItems: 'center',
@@ -19,6 +32,20 @@ export const Slide = styled.div([], {
   }
 }, space, color)
 
+class Slide extends React.Component {
+  render () {
+    const {
+      index,
+      ...props
+    } = this.props
+    return (
+      <Context.Provider value={{ index }}>
+        <Root {...props} />
+      </Context.Provider>
+    )
+  }
+}
+
 Slide.defaultProps = {
   px: [ 4, 5, 6 ]
 }

src/context.js

@@ -0,0 +1,16 @@
+import React from 'react'
+
+export const Context = React.createContext(null)
+export const { Provider, Consumer } = Context
+
+export const withDeck = Component => props =>
+  <Consumer>
+    {deck => (
+      <Component
+        {...props}
+        deck={deck}
+      />
+    )}
+  </Consumer>
+
+export default Context

src/index.js

@@ -4,6 +4,7 @@ import { MDXProvider } from '@mdx-js/tag'
 import { ThemeProvider } from 'styled-components'
 import debounce from 'lodash.debounce'
 
+import { Provider } from './context'
 import Carousel from './Carousel'
 import Slide from './Slide'
 import Dots from './Dots'
@@ -15,6 +16,7 @@ import defaultTheme from './themes'
 import defaultComponents from './components'
 
 export { default as Image } from './Image'
+export { default as Notes } from './Notes'
 export { default as components } from './components'
 
 // themes
@@ -142,38 +144,48 @@ export class SlideDeck extends React.Component {
       ? Presenter
       : Root
 
+    const context = {
+      ...this.state,
+      slides,
+    }
+
     return (
-      <ThemeProvider theme={theme}>
-        <MDXProvider
-          components={{
-            ...defaultComponents,
-            ...components
-          }}>
-          <Wrapper
-            {...this.state}
-            slides={slides}
-            width={width}
-            height={height}>
-            <GoogleFonts />
-            <Carousel index={index}>
-              {slides.map((Component, i) => (
-                <Slide key={i} id={'slide-' + i}>
-                  <Component />
-                </Slide>
-              ))}
-            </Carousel>
-            <Dots
-              mt={-32}
-              mx='auto'
-              index={index}
-              length={length}
-              onClick={index => {
-                this.setState({ index })
-              }}
-            />
-          </Wrapper>
-        </MDXProvider>
-      </ThemeProvider>
+      <Provider value={context}>
+        <ThemeProvider theme={theme}>
+          <MDXProvider
+            components={{
+              ...defaultComponents,
+              ...components
+            }}>
+            <Wrapper
+              {...this.state}
+              slides={slides}
+              width={width}
+              height={height}>
+              <GoogleFonts />
+              <Carousel index={index}>
+                {slides.map((Component, i) => (
+                  <Slide
+                    key={i}
+                    id={'slide-' + i}
+                    index={i}>
+                    <Component />
+                  </Slide>
+                ))}
+              </Carousel>
+              <Dots
+                mt={-32}
+                mx='auto'
+                index={index}
+                length={length}
+                onClick={index => {
+                  this.setState({ index })
+                }}
+              />
+            </Wrapper>
+          </MDXProvider>
+        </ThemeProvider>
+      </Provider>
     )
   }
 }