Thursday, 3 November 2016

Adding react-toolbox to your React project

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