diff --git a/README.md b/README.md index 364bfa8..43a1537 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ Note it only works with **React Toolbox 2.0 beta**. The output path shown in the [React Toolbox 2.0](https://github.com/react-toolbox/react-toolbox/releases) styles have been rewritten using [postcss](https://github.com/postcss/postcss). This gives us more flexibility and makes the library more powerful allowing things like live transforming in the browser. We still use [CSS Modules](https://github.com/css-modules/css-modules) thought, and some people find difficult to integrate the library in their current stack, specially when [Webpack](https://webpack.github.io/) is not included or accessible. -Sometimes it's annoying to configure react-toolbox to import CSS so this package will help you making easier to try out the library and providing an easy integration with tools like [react-create-app](https://github.com/facebookincubator/create-react-app). It will help you extracting the CSS modules into static files you can import in your application, making react-toolbox very easy to adopt. +Sometimes it's annoying to configure react-toolbox to import CSS so this package will help you making easier to try out the library and providing an easy integration with tools like [create-react-app](https://github.com/facebookincubator/create-react-app). It will help you extracting the CSS modules into static files you can import in your application, making react-toolbox very easy to adopt. ## Usage @@ -43,7 +43,7 @@ Once installed you can define the configuration in the `package.json` file of yo "color-primary-contrast": "var(--color-dark-contrast)", "color-accent-contrast": "var(--color-dark-contrast)" }, - "output": "assets/react-toolbox" + "output": "src/assets/react-toolbox" } ``` @@ -55,7 +55,7 @@ Then you must add a script in your `package.json` to run the builder. } ``` -After this, you can run from the console the command `yarn run toolbox` and the script will create an `assets/react-toolbox` folder and two different files: +After this, you can run from the console the command `yarn run toolbox` and the script will create a `src/assets/react-toolbox` folder and two different files: - `theme.css` includes all CSS from react-toolbox for the components you have specified in the configuration. - `theme.js` implements a javascript object (a css module) that tells react-toolbox components what are the `classNames` each included component needs to use. @@ -63,7 +63,8 @@ After this, you can run from the console the command `yarn run toolbox` and the As a final step you have to include the generated CSS file in your document just like any other CSS asset. Also, you have to use [react-css-themr](https://github.com/javivelasco/react-css-themr) `ThemeProvider` at the top of your app passing the theme. ```jsx -import theme from 'assets/react-toolbox/theme' +import theme from './assets/react-toolbox/theme'; +import './assets/react-toolbox/theme.css'; import ThemeProvider from 'react-toolbox/lib/ThemeProvider'; const App = ({ children }) => (