Installing react-toolbox
install the react-toolbox package via npm:$ npm install react-toolbox --save-dev
Setting up the (s)css loader In webpack
you will need to add loaders for the react-toolbox stylesheets. This took me quite a while to figure out, hopefully someone finds it useful :).webpack.config.js
module.exports = { ... module: { loaders: [ ... { test: /\.s?css$/, loaders: ['style-loader', 'css-loader', 'sass-loader'], exclude: /node_modules/, }, { test: /\.s?css$/, loaders: [ 'style-loader', 'css-loader?modules&importLoaders=1&localIdentName=[name]-[local]___[hash:base64:5]', 'sass-loader', ], include: /node_modules\/(react-toolbox|flexboxgrid)/, }, ... ], }, ... };
Customizing the style variables
The default colors/layout/typography might not be right for you but luckily they are customizable, to change any of the variables you can create your own variables file and place some custom ones for your site:/app/variables.scss
$my-app-color-white: rgb(255, 255, 255); $my-app-color-black: rgb(0, 0, 0); $my-app-color-dull: rgb(120, 120, 120); $color-background: $my-app-color-white !default; $color-text: $my-app-color-black !default; $color-text-secondary: $my-app-color-dull !default;This file can now be loaded via your webpack config
webpack.config.js
module.exports = { ... sassLoader: { data: `@import "${path.resolve(__dirname, 'app/variables.scss')}";`, }, ... }You can find a full list of colors and globals at the following urls:
Colors: https://github.com/react-toolbox/react-toolbox/blob/dev/lib/_colors.scss
Globals: https://github.com/react-toolbox/react-toolbox/blob/dev/lib/_globals.scss
You can also set variables for each component, have a look in the lib folder on the react-toolbox GitHub repository:
lib folder: https://github.com/react-toolbox/react-toolbox/tree/dev/lib
GitHub: https://github.com/react-toolbox/react-toolbox
Using the components
Now the components can be imported into your react project and used alongside your own custom components/app/custom-component.jsx
... import { Button } from 'react-toolbox/lib/button'; ... <Button type="submit" icon="person" label="Login" raised primary />
No comments:
Post a Comment