Skip to content

Commit cf25e79

Browse files
danezdanez
committed
chore(examples): Fix formating of umd examples
1 parent 46c1a60 commit cf25e79

File tree

3 files changed

+60
-57
lines changed

3 files changed

+60
-57
lines changed

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,8 @@ You can also use react-tabs directly as UMD build in an HTML document by adding
1818
<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.production.min.js" />
1919
```
2020
21-
For example usages of the UMD builds have a look at the [`examples/umd`](./examples/umd/) folder
21+
For example usages of the UMD builds have a look at the [`examples/umd`](./examples/umd/) folder.
22+
The development UMD build also needs the package `prop-types` being loaded besides `react`.
2223
2324
## Demo
2425

‎examples/umd/development.html

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,33 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Hello World</title>
6+
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
7+
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
8+
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
9+
<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.development.js"></script>
10+
<link href="https://unpkg.com/react-tabs@2/style/react-tabs.css" rel="stylesheet">
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
<script type="text/babel">
15+
const { Tabs, TabList, Tab, TabPanel } = ReactTabs;
316

4-
<head>
5-
<meta charset="UTF-8" />
6-
<title>Hello World</title>
7-
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
8-
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
9-
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
10-
<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.development.js"></script>
11-
<link href="https://unpkg.com/react-tabs@2/style/react-tabs.css" rel="stylesheet">
12-
</head>
13-
14-
<body>
15-
<div id="root"></div>
16-
<script type="text/babel">
17-
const { Tabs, TabList, Tab, TabPanel } = ReactTabs; ReactDOM.render(
18-
<div>
19-
<h1>Hello, tabs!</h1>
20-
<Tabs>
21-
<TabList>
22-
<Tab>A</Tab>
23-
<Tab>B</Tab>
24-
</TabList>
25-
<TabPanel>This is the content for tab A</TabPanel>
26-
<TabPanel>This is the content for tab B</TabPanel>
27-
</Tabs>
28-
</div>, document.getElementById('root') );
29-
</script>
30-
</body>
31-
17+
ReactDOM.render(
18+
<div>
19+
<h1>Hello, tabs!</h1>
20+
<Tabs>
21+
<TabList>
22+
<Tab>A</Tab>
23+
<Tab>B</Tab>
24+
</TabList>
25+
<TabPanel>This is the content for tab A</TabPanel>
26+
<TabPanel>This is the content for tab B</TabPanel>
27+
</Tabs>
28+
</div>,
29+
document.getElementById('root')
30+
);
31+
</script>
32+
</body>
3233
</html>

‎examples/umd/production.html

Lines changed: 29 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,33 @@
11
<!DOCTYPE html>
22
<html>
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Hello World</title>
6+
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
7+
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
8+
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
9+
<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.production.min.js"></script>
10+
<link href="https://unpkg.com/react-tabs@2/style/react-tabs.css" rel="stylesheet">
11+
</head>
12+
<body>
13+
<div id="root"></div>
14+
<script type="text/babel">
15+
const { Tabs, TabList, Tab, TabPanel } = ReactTabs;
316

4-
<head>
5-
<meta charset="UTF-8" />
6-
<title>Hello World</title>
7-
<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
8-
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
9-
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
10-
<script src="https://unpkg.com/react-tabs@2/dist/react-tabs.production.min.js"></script>
11-
<link href="https://unpkg.com/react-tabs@2/style/react-tabs.css" rel="stylesheet">
12-
</head>
13-
14-
<body>
15-
<div id="root"></div>
16-
<script type="text/babel">
17-
const { Tabs, TabList, Tab, TabPanel } = ReactTabs; ReactDOM.render(
18-
<div>
19-
<h1>Hello, tabs!</h1>
20-
<Tabs>
21-
<TabList>
22-
<Tab>A</Tab>
23-
<Tab>B</Tab>
24-
</TabList>
25-
<TabPanel>This is the content for tab A</TabPanel>
26-
<TabPanel>This is the content for tab B</TabPanel>
27-
</Tabs>
28-
</div>, document.getElementById('root') );
29-
</script>
30-
</body>
31-
17+
ReactDOM.render(
18+
<div>
19+
<h1>Hello, tabs!</h1>
20+
<Tabs>
21+
<TabList>
22+
<Tab>A</Tab>
23+
<Tab>B</Tab>
24+
</TabList>
25+
<TabPanel>This is the content for tab A</TabPanel>
26+
<TabPanel>This is the content for tab B</TabPanel>
27+
</Tabs>
28+
</div>,
29+
document.getElementById('root')
30+
);
31+
</script>
32+
</body>
3233
</html>

0 commit comments

Comments
 (0)