With office-ui-fabric-react as a dependency in your package.json file, you can now start using components and styling. To reference a component, import it and use it in your render method:
+
The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in your render method. Note that wrapping your application in the Fabric component is required to support RTL, keyboard focus and other features.
{
`import * as React from 'react';
import * as ReactDOM from 'react-dom';
+import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-const MyPage = () => (
I am a button.
);
+const MyPage = () => (I am a button.);
ReactDOM.render(, document.body.firstChild);`
}
diff --git a/packages/office-ui-fabric-react/README.md b/packages/office-ui-fabric-react/README.md
index b87297fd35c97a..9fe013c63e8c80 100644
--- a/packages/office-ui-fabric-react/README.md
+++ b/packages/office-ui-fabric-react/README.md
@@ -57,14 +57,15 @@ npm install --save office-ui-fabric-react
This will add the fabric-react project as a dependency in your package.json file, and will drop the project under node_modules/office-ui-fabric-react.
-The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in your render method:
+The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in your render method. Note that wrapping your application in the Fabric component is required to support RTL, keyboard focus and other features.
```js
import * as React from 'react';
import * as ReactDOM from 'react-dom';
-import { Button } from 'office-ui-fabric-react/lib/Button';
+import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-const MyPage = () => ();
+const MyPage = () => (I am a button.);
ReactDOM.render(, document.body.firstChild);
```
diff --git a/packages/office-ui-fabric-react/src/demo/GettingStartedPage.tsx b/packages/office-ui-fabric-react/src/demo/GettingStartedPage.tsx
index 381d9d5d17fdf6..ac77b3ad399e7c 100644
--- a/packages/office-ui-fabric-react/src/demo/GettingStartedPage.tsx
+++ b/packages/office-ui-fabric-react/src/demo/GettingStartedPage.tsx
@@ -40,16 +40,17 @@ export class GettingStartedPage extends React.Component {
}
{
- `The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in your render method:`
+ `The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in your render method. Note that wrapping your application in the Fabric component is required to support RTL, keyboard focus and other features.`
}
{
`import * as React from 'react';
import * as ReactDOM from 'react-dom';
+import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
-const MyPage = () => (
I am a button.
);
+const MyPage = () => (I am a button.);
ReactDOM.render(, document.body.firstChild);`
}