Skip to content

Commit 04d5b3f

Browse files
redallenredallen
committed
add documentation
1 parent e4a5c28 commit 04d5b3f

File tree

3 files changed

+129
-0
lines changed

3 files changed

+129
-0
lines changed

‎packages/react-docs/gatsby-config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ module.exports = {
1111
resolve: `gatsby-theme-patternfly-org`,
1212
options: {
1313
context: 'react', // For global items that need sideNav
14+
showGdprBanner: false, // GDPR banner
1415
hiddenPages: ['withOuia', 'Training'], // By title
1516
sideNav: {
1617
react: [

‎packages/react-docs/static/like-button.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use strict';
2+
3+
const e = React.createElement;
4+
5+
class LikeButton extends React.Component {
6+
constructor(props) {
7+
super(props);
8+
this.state = { liked: false };
9+
}
10+
11+
render() {
12+
if (this.state.liked) {
13+
return e(PatternFlyReact.Alert, {
14+
title: ' Great success',
15+
children: 'You liked this',
16+
variant: 'success'
17+
});
18+
}
19+
20+
return e(
21+
PatternFlyReact.Button,
22+
{ onClick: () => this.setState({ liked: true }) },
23+
'Like'
24+
);
25+
}
26+
}
27+
28+
29+
const domContainer = document.querySelector('#react-root');
30+
ReactDOM.render(e(LikeButton), domContainer);

‎packages/react-docs/static/umd.html‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
<!DOCTYPE html>
2+
<html lang="en-us">
3+
<head>
4+
<link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@2/patternfly.css" crossorigin />
5+
<meta charset="utf-8"/>
6+
</head>
7+
<body>
8+
<h1 class="pf-c-title pf-m-2xl">PatternFly-React UMD Build</h1>
9+
<p>
10+
UMD build allow for you to quickly get started using <a href="">@patternfly/react-core.</a>
11+
If you care about how this is accomplished, it's highly recommended to read&nbsp;
12+
<a href="https://reactjs.org/docs/add-react-to-a-website.html#add-react-in-one-minute">React's getting started with UMD guide</a> before returning here since.
13+
This guide uses React's guide as a base.
14+
</p>
15+
<h2 class="pf-c-title pf-m-2xl">1. Write HTML</h2>
16+
<p>
17+
Create a container to inject React components into.
18+
<pre>
19+
&lt;div id="react-root">Inject in here&lt;/div>
20+
</pre>
21+
</p>
22+
<h2 class="pf-c-title pf-m-2xl">2. Include JS</h2>
23+
<p>
24+
PatternFly React depends on React and PropTypes. Add these to the bottom of the &lt;body> tag on your page:
25+
<pre>
26+
&lt;script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin>&lt;/script>
27+
&lt;script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin>&lt;/script>
28+
&lt;script src="https://unpkg.com/prop-types@15.6/prop-types.js" crossorigin>&lt;/script>
29+
&lt;script src="https://unpkg.com/@patternfly/react-core@3/dist/umd/react-core.umd.js">&lt;/script>
30+
&lt;script src="like-button.js">&lt;/script>
31+
</pre>
32+
33+
@patternfly/react-core exposes a "PatternFlyReact" object for use in your like-button.js. Populate your like-button.js with something like:
34+
<pre>
35+
'use strict';
36+
37+
const e = React.createElement;
38+
39+
class LikeButton extends React.Component {
40+
constructor(props) {
41+
super(props);
42+
this.state = { liked: false };
43+
}
44+
45+
render() {
46+
if (this.state.liked) {
47+
return e(PatternFlyReact.Alert, {
48+
title: ' Great success',
49+
children: 'You liked this',
50+
variant: 'success'
51+
});
52+
}
53+
54+
return e(
55+
PatternFlyReact.Button,
56+
{ onClick: () => this.setState({ liked: true }) },
57+
'Like'
58+
);
59+
}
60+
}
61+
62+
63+
const domContainer = document.querySelector('#react-root');
64+
ReactDOM.render(e(LikeButton), domContainer);
65+
</pre>
66+
</p>
67+
<h2 class="pf-c-title pf-m-2xl">3. (Optional) Include styles</h2>
68+
<p>
69+
You have to include <b>ALL</b> our PatternFly styles. There's two ways to do this:
70+
<pre>
71+
&lt;link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@2/patternfly.css" crossorigin />
72+
</pre>
73+
OR
74+
<pre>
75+
&lt;link rel="stylesheet" href="https://unpkg.com/@patternfly/react-core@3/dist/styles/base.css" crossorigin />
76+
&lt;link rel="stylesheet" href="https://unpkg.com/@patternfly/react-core@3/dist/react-core.umd.css" crossorigin />
77+
</pre>
78+
</p>
79+
<h2 class="pf-c-title pf-m-2xl">4. Don't do this in production</h2>
80+
<p>
81+
This implementation is very bloated.
82+
ALL of React, ReactDOM, PropTypes (which you don't need in production...), and PatternFly (including CSS and fonts) are included which takes 912KB <i>after</i> being gzipped.
83+
Even when minified, they take 520Kb <i>after</i> being gzipped.
84+
Also, you probably want to be able to use JSX.
85+
To enable using JSX, treeshaking, and other modern JS tools PatternFly recommendeds consumption using <a href="https://github.com/patternfly/patternfly-react-seed">Webpack.</a>
86+
It's as simple as cloning <a href="https://github.com/patternfly/patternfly-react-seed">our seed repo</a> and running 2 commands!
87+
</p>
88+
<p>
89+
This page serves as an example of how to do this. Checkout the like button below!
90+
</p>
91+
<div id="react-root">Inject like button here</div>
92+
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
93+
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
94+
<script src="https://unpkg.com/prop-types@15.6/prop-types.js" crossorigin></script>
95+
<script src="https://unpkg.com/@patternfly/react-core@3/dist/umd/react-core.umd.js"></script>
96+
<script src="like-button.js"></script>
97+
</body>
98+
</html>

0 commit comments

Comments
 (0)