lets actually add a react component...

Author: chrisdrackett

.gitignore

@@ -7,3 +7,4 @@
 npm-debug.log*
 .DS_Store
 /keygen/key.p8
+/src/dist

demo/src/index.js

@@ -8,6 +8,8 @@ import usWebDesignStandardsTheme from 'typography-theme-us-web-design-standards'
 
 import { css } from 'glamor'
 
+import MapKit from '../../src'
+
 css.global('html, body', { padding: 0, margin: 0 })
 css.global('body', {
   backgroundColor: '#18d7fd',
@@ -34,21 +36,6 @@ Todo
 `
 
 class Demo extends React.Component {
-  componentDidMount() {
-    load('https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js', function(err) {
-      mapkit.init({
-        authorizationCallback: function(done) {
-          done(
-            'eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkY2N0c4OTM3RjUifQ.eyJpYXQiOjE1MjgzNTQwOTYuNzI2LCJpc3MiOiJHOERBODY0VVlLIiwib3JpZ2luIjoiaHR0cHM6Ly9jaHJpc2RyYWNrZXR0LmdpdGh1Yi5pbyJ9.Z9FW9wYDO0AfOyWnf0d3vLGbu62GTu7WKtxPXAuVFiimr1DR4JN_s6YB8wG9kvZl4ACp4j857U4bOV5NIi55HA',
-          )
-        },
-        language: 'en',
-      })
-
-      const map = new mapkit.Map('map')
-    })
-  }
-
   render() {
     const white = '#ffffff'
 
@@ -79,7 +66,10 @@ class Demo extends React.Component {
         <section {...css(styles.sidebar)}>
           <Markdown source={content} />
         </section>
-        <section {...css(styles.content)} id="map" />
+        <MapKit
+          {...css(styles.content)}
+          token="eyJhbGciOiJFUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IkY2N0c4OTM3RjUifQ.eyJpYXQiOjE1MjgzNTQwOTYuNzI2LCJpc3MiOiJHOERBODY0VVlLIiwib3JpZ2luIjoiaHR0cHM6Ly9jaHJpc2RyYWNrZXR0LmdpdGh1Yi5pbyJ9.Z9FW9wYDO0AfOyWnf0d3vLGbu62GTu7WKtxPXAuVFiimr1DR4JN_s6YB8wG9kvZl4ACp4j857U4bOV5NIi55HA"
+        />
       </div>
     )
   }

src/index.js

@@ -0,0 +1,64 @@
+// @flow
+
+import * as React from 'react'
+import load from 'little-loader'
+
+type Props = {
+  /**
+   * Prop Description
+   */
+  callbackUrl?: string,
+  token?: string,
+}
+
+type State = {
+  mapKitIsReady: boolean,
+  makKitIsStarted: boolean,
+}
+
+export default class ComponentTemplate extends React.Component<Props, State> {
+  map = null
+
+  state = {
+    mapKitIsReady: false,
+    makKitIsStarted: false,
+  }
+
+  constructor(props: Props) {
+    super(props)
+
+    load(
+      'https://cdn.apple-mapkit.com/mk/5.x.x/mapkit.js',
+      function(err) {
+        this.setState({ mapKitIsReady: true })
+      },
+      this,
+    )
+  }
+
+  componentDidUpdate() {
+    if (this.state.mapKitIsReady && !this.state.makKitIsStarted) {
+      mapkit.init({
+        authorizationCallback: (done) => {
+          if (this.props.callbackUrl) {
+            fetch(this.props.callbackUrl)
+              .then((res) => res.text())
+              .then(done)
+          } else {
+            done(this.props.token)
+          }
+        },
+      })
+
+      this.map = new mapkit.Map('map')
+
+      this.setState({ makKitIsStarted: true })
+    }
+  }
+
+  render() {
+    const { callbackUrl, token, ...otherProps } = this.props
+
+    return <div id="map" {...otherProps} />
+  }
+}