Skip to content

Commit ed6b62e

Browse files
mlaursenmlaursen
committed
feat(examples): added a simple umd example to show CDN usage
1 parent 8ecf8e3 commit ed6b62e

File tree

2 files changed

+110
-0
lines changed

2 files changed

+110
-0
lines changed

‎examples/umd/README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# ReactMD with UMD
2+
3+
This is a simple example of how you can use the UMD bundles from React,
4+
ReactDOM, and ReactMD.
5+
6+
## What's Included
7+
8+
I super simple `index.html` file that:
9+
10+
- loads the Material Icons and Roboto fonts
11+
- loads the `React`, `ReactDOM`, and `ReactMD` UMD bundles
12+
- creates a simple [index.html](./index.html) that uses the `TextContainer` and
13+
`Text` components from `ReactMD`
14+
15+
## How to Use
16+
17+
First download the example (or just copy/paste the [index.html](./index.html)):
18+
19+
```bash
20+
curl https://codeload.github.com/mlaursen/react-md/tar.gz/master | tar -xz --strip=2 react-md-master/examples/nextjs
21+
cd nextjs
22+
```
23+
24+
Next, open the file by double clicking or running the following command in the
25+
command line:
26+
27+
```sh
28+
open index.html
29+
```
30+
31+
Finally, manually update the `index.html` with changes in the final `<script>`
32+
tag and reload the browser to see changes.
33+
34+
## Learn More
35+
36+
This example is really just a way to showcase the UMD bundles and pre-compiled
37+
themes using CDNs. You'll normally use something like
38+
[webpack externals](https://webpack.js.org/configuration/externals/) if you want
39+
to use the UMD version instead of a manual `index.html` file above., but this
40+
can be used for some code websites like [codepen.io](https://codepen.io).
41+
42+
You can always learn more about ReactMD from the main
43+
[documentation website](https://react-md.dev).

‎examples/umd/index.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<link
7+
rel="stylesheet"
8+
href="https://fonts.googleapis.com/css?family=Roboto:400,500:700&display=swap"
9+
/>
10+
<link
11+
crossorigin
12+
rel="stylesheet"
13+
href="https://cdn.jsdelivr.net/gh/mlaursen/react-md@latest/themes/react-md.teal-pink-200-dark.min.css"
14+
/>
15+
<title>ReactMD UMD Example</title>
16+
</head>
17+
<body>
18+
<noscript>You need to enable JavaScript to run this app.</noscript>
19+
<!-- development scripts -->
20+
<script
21+
crossorigin
22+
src="https://unpkg.com/react@16/umd/react.development.js"
23+
></script>
24+
<script
25+
crossorigin
26+
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
27+
></script>
28+
<script
29+
crossorigin
30+
src="https://unpkg.com/react-md@latest/dist/umd/react-md-with-svg-icons.development.js"
31+
></script>
32+
33+
<!-- production scripts -->
34+
<!-- <script -->
35+
<!-- crossorigin -->
36+
<!-- src="https://unpkg.com/react@16/umd/react.production.min.js" -->
37+
<!-- ></script> -->
38+
<!-- <script -->
39+
<!-- crossorigin -->
40+
<!-- src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" -->
41+
<!-- ></script> -->
42+
<!-- <script -->
43+
<!-- crossorigin -->
44+
<!-- src="https://unpkg.com/react-md@latest/dist/umd/react-md-with-svg-icons.production.min.js" -->
45+
<!-- ></script> -->
46+
<div id="root"></div>
47+
48+
<script>
49+
ReactDOM.render(
50+
React.createElement(App),
51+
document.getElementById("root")
52+
);
53+
54+
function App() {
55+
return React.createElement(
56+
ReactMD.TextContainer,
57+
{},
58+
React.createElement(
59+
ReactMD.Text,
60+
{ type: "headline-2" },
61+
"Hello, World!"
62+
)
63+
);
64+
}
65+
</script>
66+
</body>
67+
</html>

0 commit comments

Comments
 (0)