Doc Site - Added react-tap-event-plugin notes. Fixes #111

mui · Dec 6, 2014 · 85f7fbf · 85f7fbf
1 parent c95c80a
commit 85f7fbf
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 26 deletions.
diff --git a/README.md b/README.md
@@ -35,6 +35,20 @@ var SomeAwesomeComponent = React.createClass({
 module.exports = SomeAwesomeComponent;
 ```
 
+### Usage Notes
+Some components uses [react-tap-event-plugin](https://github.com/zilverline/react-tap-event-plugin) to
+listen for touch events. This dependency is temporary and will go away once react v1.0 is released. Until then, be
+sure to inject this plugin at the start of your app.
+```js
+var injectTapEventPlugin = require("react-tap-event-plugin");
+
+//Needed for onTouchTap
+//Can go away when react 1.0 release
+//Check this repo:
+//https://github.com/zilverline/react-tap-event-plugin
+injectTapEventPlugin();
+```
+
 ## Customization
 
 The styles are separated into 2 less files:

diff --git a/docs/src/app/components/pages/get-started.jsx b/docs/src/app/components/pages/get-started.jsx
@@ -10,26 +10,34 @@ var GetStarted = React.createClass({
 
   render: function() {
     var usageCode =
-      '/**\n' +
-      ' * @jsx React.DOM\n' +
-      '*/\n\n' +
-      'var React = require(\'react\'),\n' +
-      '  mui = require(\'material-ui\'),\n' +
-      '  RaisedButton = mui.RaisedButton;\n\n' +
-      'var SomeAwesomeComponent = React.createClass({\n\n' +
-      '  render: function() {\n' +
-      '    return (\n' +
-      '        <RaisedButton label="Default" />\n' +
-      '    );\n' +
-      '  }\n\n' +
-      '});\n\n' +
-      'module.exports = SomeAwesomeComponent;';
+          '/**\n' +
+          ' * @jsx React.DOM\n' +
+          '*/\n\n' +
+          'var React = require(\'react\'),\n' +
+          '  mui = require(\'material-ui\'),\n' +
+          '  RaisedButton = mui.RaisedButton;\n\n' +
+          'var SomeAwesomeComponent = React.createClass({\n\n' +
+          '  render: function() {\n' +
+          '    return (\n' +
+          '        <RaisedButton label="Default" />\n' +
+          '    );\n' +
+          '  }\n\n' +
+          '});\n\n' +
+          'module.exports = SomeAwesomeComponent;',
 
-    var customizationCode = 
-      '@import "node_modules/material-ui/dist/less/scaffolding.less";\n\n' +
-      '//Define a custom less file to override\n//any variables defined in scaffolding.less\n' +
-      '@import "my-custom-overrides.less";\n\n' +
-      '@import "node_modules/material-ui/dist/less/components.less";';
+      customizationCode = 
+        '@import "node_modules/material-ui/dist/less/scaffolding.less";\n\n' +
+        '//Define a custom less file to override\n//any variables defined in scaffolding.less\n' +
+        '@import "my-custom-overrides.less";\n\n' +
+        '@import "node_modules/material-ui/dist/less/components.less";',
+
+      usageNotesCode =
+        'var injectTapEventPlugin = require("react-tap-event-plugin");\n\n' +
+        '//Needed for onTouchTap\n' +
+        '//Can go away when react 1.0 release\n' +
+        '//Check this repo:\n' +
+        '//https://github.com/zilverline/react-tap-event-plugin\n' +
+        'injectTapEventPlugin();\n';
 
     return (
       <div className="get-started-page mui-app-content-canvas">
@@ -43,6 +51,12 @@ var GetStarted = React.createClass({
             so you'll need to compile that as well.
           </p>
 
+          <h2 className="mui-font-style-headline">Sass</h2>
+          <p>
+            For <a href="http://www.sass-lang.com/">Sass</a> users, 
+            <a href="https://github.com/gpbl/material-ui-sass">material-ui-sass</a> contains the .scss version of the Less framework.
+          </p>
+
           <h2 className="mui-font-style-headline">Usage</h2>
           <p>
             Once material-ui is included in your project, you can use the components this way:
@@ -51,6 +65,16 @@ var GetStarted = React.createClass({
             <CodeBlock>{usageCode}</CodeBlock>
           </mui.Paper>
 
+          <h2 className="mui-font-style-headline">Usage Notes</h2>
+          <p>
+            Some components uses <a href="https://github.com/zilverline/react-tap-event-plugin">react-tap-event-plugin</a> to
+            listen for touch events. This dependency is temporary and will go away once react v1.0 is released. Until then, be
+            sure to inject this plugin at the start of your app.
+          </p>
+          <mui.Paper className="code-example">
+            <CodeBlock>{usageNotesCode}</CodeBlock>
+          </mui.Paper>
+
           <h2 className="mui-font-style-headline">Customization</h2>
           <div>
             <p>The styles are separated into 2 less files:</p>
@@ -65,13 +89,6 @@ var GetStarted = React.createClass({
             <CodeBlock>{customizationCode}</CodeBlock>
           </mui.Paper>
 
-
-          <h2 className="mui-font-style-headline">Sass</h2>
-          <p>
-            For <a href="http://www.sass-lang.com/">Sass</a> users, 
-            <a href="https://github.com/gpbl/material-ui-sass">material-ui-sass</a> contains the .scss version of the Less framework.
-          </p>
-
         </div>
       </div>
     );