PatternFly-React UMD Build

UMD build allow for you to quickly get started using @patternfly/react-core. If you care about how this is accomplished, it's highly recommended to read React's getting started with UMD guide before returning here since. This guide uses React's guide as a base.

1. Write HTML

Create a container to inject React components into.

      <div id="react-root">Inject in here</div>

2. Include JS

PatternFly React depends on React and PropTypes. Add these to the bottom of the <body> tag on your page:

      <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin="anonymous"></script>
      <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin="anonymous"></script>
      <script src="https://unpkg.com/prop-types@15.6/prop-types.js" crossorigin="anonymous"></script>
      <script src="https://unpkg.com/@patternfly/react-core@3/dist/umd/react-core.js" crossorigin="anonymous"></script>
      <script src="like-button.js"></script>

@patternfly/react-core exposes a "PatternFlyReact" object for use in your like-button.js. Populate your like-button.js with something like:

      'use strict';

      const e = React.createElement;

      class LikeButton extends React.Component {
        constructor(props) {
          super(props);
          this.state = { liked: false };
        }

        render() {
          if (this.state.liked) {
            return e(PatternFlyReact.Alert, {
              title: ' Great success',
              children: 'You liked this',
              variant: 'success'
            });
          }

          return e(
            PatternFlyReact.Button,
            { onClick: () => this.setState({ liked: true }) },
            'Like'
          );
        }
      }


      const domContainer = document.querySelector('#react-root');
      ReactDOM.render(e(LikeButton), domContainer);

3. (Optional) Include styles

You have to include ALL our PatternFly styles. There's two ways to do this:

      <link rel="stylesheet" href="https://unpkg.com/@patternfly/patternfly@2/patternfly.css" crossorigin />

      <link rel="stylesheet" href="https://unpkg.com/@patternfly/react-core@3/dist/styles/base.css" crossorigin />
      <link rel="stylesheet" href="https://unpkg.com/@patternfly/react-core@3/dist/react-core.umd.css" crossorigin />

4. Don't do this in production

This implementation is very bloated. ALL of React, ReactDOM, PropTypes (which you don't need in production...), and PatternFly (including CSS and fonts) are included which takes 912KB after being gzipped. Even when minified, they take 520Kb after being gzipped. Also, you probably want to be able to use JSX. To enable using JSX, treeshaking, and other modern JS tools PatternFly recommendeds consumption using Webpack. It's as simple as cloning our seed repo and running 2 commands!

This page serves as an example of how to do this. Checkout the like button below!

Inject like button here