diff --git a/README.md b/README.md index 9faf725da1bfb4..eebb03e7355069 100644 --- 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 index 9bdea29aa4715e..d6b59983ac9f59 100644 --- 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' + - ' \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' + + ' \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 (
@@ -43,6 +51,12 @@ var GetStarted = React.createClass({ so you'll need to compile that as well.

+

Sass

+

+ For Sass users, + material-ui-sass contains the .scss version of the Less framework. +

+

Usage

Once material-ui is included in your project, you can use the components this way: @@ -51,6 +65,16 @@ var GetStarted = React.createClass({ {usageCode} +

Usage Notes

+

+ Some components uses 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. +

+ + {usageNotesCode} + +

Customization

The styles are separated into 2 less files:

@@ -65,13 +89,6 @@ var GetStarted = React.createClass({ {customizationCode} - -

Sass

-

- For Sass users, - material-ui-sass contains the .scss version of the Less framework. -

-
);