Add example.

u-wave · Jun 16, 2018 · 38df581 · 38df581
1 parent 4e6b062
commit 38df581
Show file tree

Hide file tree

Showing 8 changed files with 134 additions and 1 deletion.
diff --git a/.eslintignore b/.eslintignore
@@ -1,3 +1,4 @@
 node_modules
 example/bundle.js
+example/frame-bundle.js
 dist
diff --git a/.gitignore b/.gitignore
@@ -1,6 +1,6 @@
 node_modules
 /dist
 /example/bundle.js
-/generated-docs.md
+/example/frame-bundle.js
 .eslintcache
 package-lock.json
diff --git a/example/.babelrc.js b/example/.babelrc.js
@@ -0,0 +1 @@
+module.exports = require('../.babelrc');
diff --git a/example/app.js b/example/app.js
@@ -0,0 +1,42 @@
+/* eslint-env browser */
+/* eslint-disable jsx-a11y/label-has-for */
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+class MainApp extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      large: true,
+    };
+
+    this.handleChange = this.handleChange.bind(this);
+  }
+
+  handleChange(event) {
+    this.setState({
+      large: event.target.checked,
+    });
+  }
+
+  render() {
+    return (
+      <div>
+        <p>
+          <input id="size" type="checkbox" checked={this.state.large} onChange={this.handleChange} />
+          <label htmlFor="size">
+            Large iframe
+          </label>
+        </p>
+        <iframe
+          width={this.state.large ? 800 : 500}
+          title="demo iframe"
+          src="frame.html"
+        />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<MainApp />, document.getElementById('example'));
diff --git a/example/frame.html b/example/frame.html
@@ -0,0 +1,10 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <div id="example"></div>
+    <script src="frame-bundle.js"></script>
+  </body>
+</html>
diff --git a/example/frame.js b/example/frame.js
@@ -0,0 +1,23 @@
+/* eslint-env browser */
+import React from 'react';
+import ReactDOM from 'react-dom';
+import MediaQuery from '../';
+
+const FrameApp = () => (
+  <div>
+    <MediaQuery
+      query="(min-width: 768px)"
+      render={matches => (
+        <p>Matches: {JSON.stringify(matches)}</p>
+      )}
+    />
+    <MediaQuery query="(min-width: 768px)">
+      <p>Big screen!</p>
+    </MediaQuery>
+    <MediaQuery query="(max-width: 767px)">
+      <p>Small screen!</p>
+    </MediaQuery>
+  </div>
+);
+
+ReactDOM.render(<FrameApp />, document.getElementById('example'));
diff --git a/example/index.html b/example/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>@u-wave/react-mq example</title>
+    <link rel="stylesheet"
+          href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.100.2/css/materialize.min.css">
+    <style>
+      .example-container {
+        max-width: 1280px;
+        margin: auto;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="example-container">
+      <div class="row">
+        <div class="col s12">
+          <h1>@u-wave/react-mq example</h1>
+          <p>
+            An example responsive component using <a href="https://facebook.github.io/react">React</a>
+            and <a href="https://github.com/u-wave/react-mq">@u-wave/react-mq</a>.
+            <a href="https://github.com/u-wave/react-mq/tree/master/example">view source</a>
+          </p>
+        </div>
+      </div>
+    </div>
+    <div class="example-container" id="example"></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>
diff --git a/example/package.json b/example/package.json
@@ -0,0 +1,25 @@
+{
+  "private": true,
+  "name": "@u-wave/react-mq-example",
+  "description": "react-mq example.",
+  "version": "0.0.0-example",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "postinstall": "npm run build",
+    "build": "npm run build:frame && npm run build:main",
+    "build:main": "cross-env BABEL_ENV=cjs browserify -t babelify frame.js > frame-bundle.js",
+    "build:frame": "cross-env BABEL_ENV=cjs browserify -t babelify app.js > bundle.js",
+    "start": "ecstatic ."
+  },
+  "dependencies": {
+    "ecstatic": "^3.0.0",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.0.0-beta.51",
+    "babelify": "^9.0.0",
+    "browserify": "^16.0.0",
+    "cross-env": "^5.1.6"
+  }
+}