vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Add a section to explain App wrapper

old
Javi Velasco 2015-11-15 20:53:59 +01:00
parent 7667f3965f
commit 92e6aaec49
2 changed files with 36 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
README.md
View File

@ -37,6 +37,24 @@ The previous code creates a React button component based on React toolbox button
We encourage you to work with webpack but if you want to use React Toolbox in an old fashioned way you must generate a build with all the css and javascript and include it in your `index.html`. Then you can use the components exposed in the `window` object.
## The `App` component
There are some components in React Toolbox that requires special positioning. For example, `Dialog` and `Drawer` components block the scroll showing a fixed positioned overlay. To handle these cases, React Toolbox needs some styling in your root node. This can be achieved wrapping your app with a non intrusive `App` wrapper component:
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import ToolboxApp from 'react-toolbox/lib/app';
import App from './my-app';
ReactDOM.render(
<ToolboxApp>
<App />
</ToolboxApp>
, document.getElementById('app'));
```
## Customization
Since React Toolbox styles are written in CSS it's pretty easy to customize your components. We have several ways:

18
docs/app/components/layout/install/install.md
View File

@ -31,6 +31,24 @@ The previous code creates a React button component based on React toolbox button
We encourage you to work with webpack but if you want to use React Toolbox in an old fashioned way you must generate a build with all the css and javascript and include it in your `index.html`. Then you can use the components exposed in the `window` object.
## The `App` component
There are some components in React Toolbox that requires special positioning. For example, `Dialog` and `Drawer` components block the scroll showing a fixed positioned overlay. To handle these cases, React Toolbox needs some styling in your root node. This can be achieved wrapping your app with a non intrusive `App` wrapper component:
```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import ToolboxApp from 'react-toolbox/lib/app';
import App from './my-app';
ReactDOM.render(
<ToolboxApp>
<App />
</ToolboxApp>
, document.getElementById('app'));
```
## Customization
Since React Toolbox styles are written in CSS it's pretty easy to customize your components. We have several ways: