feat(examples): added a simple umd example to show CDN usage

mlaursen · Sep 6, 2020 · ed6b62e · ed6b62e
1 parent 8ecf8e3
commit ed6b62e
Show file tree

Hide file tree

Showing 2 changed files with 110 additions and 0 deletions.
diff --git a/examples/umd/README.md b/examples/umd/README.md
@@ -0,0 +1,43 @@
+# ReactMD with UMD
+
+This is a simple example of how you can use the UMD bundles from React,
+ReactDOM, and ReactMD.
+
+## What's Included
+
+I super simple `index.html` file that:
+
+- loads the Material Icons and Roboto fonts
+- loads the `React`, `ReactDOM`, and `ReactMD` UMD bundles
+- creates a simple [index.html](./index.html) that uses the `TextContainer` and
+  `Text` components from `ReactMD`
+
+## How to Use
+
+First download the example (or just copy/paste the [index.html](./index.html)):
+
+```bash
+curl https://codeload.github.com/mlaursen/react-md/tar.gz/master | tar -xz --strip=2 react-md-master/examples/nextjs
+cd nextjs
+```
+
+Next, open the file by double clicking or running the following command in the
+command line:
+
+```sh
+open index.html
+```
+
+Finally, manually update the `index.html` with changes in the final `<script>`
+tag and reload the browser to see changes.
+
+## Learn More
+
+This example is really just a way to showcase the UMD bundles and pre-compiled
+themes using CDNs. You'll normally use something like
+[webpack externals](https://webpack.js.org/configuration/externals/) if you want
+to use the UMD version instead of a manual `index.html` file above., but this
+can be used for some code websites like [codepen.io](https://codepen.io).
+
+You can always learn more about ReactMD from the main
+[documentation website](https://react-md.dev).
diff --git a/examples/umd/index.html b/examples/umd/index.html
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css?family=Roboto:400,500:700&display=swap"
+    />
+    <link
+      crossorigin
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@latest/themes/react-md.teal-pink-200-dark.min.css"
+    />
+    <title>ReactMD UMD Example</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <!-- development scripts -->
+    <script
+      crossorigin
+      src="https://unpkg.com/react@16/umd/react.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
+    ></script>
+    <script
+      crossorigin
+      src="https://unpkg.com/react-md@latest/dist/umd/react-md-with-svg-icons.development.js"
+    ></script>
+
+    <!-- production scripts -->
+    <!-- <script -->
+    <!--   crossorigin -->
+    <!--   src="https://unpkg.com/react@16/umd/react.production.min.js" -->
+    <!-- ></script> -->
+    <!-- <script -->
+    <!--   crossorigin -->
+    <!--   src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" -->
+    <!-- ></script> -->
+    <!-- <script -->
+    <!--   crossorigin -->
+    <!--   src="https://unpkg.com/react-md@latest/dist/umd/react-md-with-svg-icons.production.min.js" -->
+    <!-- ></script> -->
+    <div id="root"></div>
+
+    <script>
+      ReactDOM.render(
+        React.createElement(App),
+        document.getElementById("root")
+      );
+
+      function App() {
+        return React.createElement(
+          ReactMD.TextContainer,
+          {},
+          React.createElement(
+            ReactMD.Text,
+            { type: "headline-2" },
+            "Hello, World!"
+          )
+        );
+      }
+    </script>
+  </body>
+</html>