Using react-toolbox with create-react-app

If you’ve ever used create-react-app with react-toolbox, I’m very sure you’ve already ran into the problem of having to deal with tons of errors because of create-react-app not supporting CSS Modules. According to their plans, they will not support CSS Modules anytime soon.

So here’s a guide on getting react-toolbox to work with create-react-app with the help of react-toolbox-themr, which extracts react-toolbox style modules into static files so it can be integrated with create-react-app .

Setting up react-toolbox-themr

Firstly, run:

create-react-app ReactToolboxStarter && cd ReactToolboxStarter

Then add react-toolbox-themr and react-toolbox:

yarn add react-toolbox-themr react-toolbox

Now it’s time to configure your package.json file. add into the "scripts" object:

"toolbox": "react-toolbox-themr"

and add:

"reactToolbox": {
    "include": [
        "BUTTON",
        "DATE_PICKER"
    ],
    "customProperties": {
        "animation-duration": "0.3s",
        "color-accent": "var(--palette-pink-a200)",
        "color-accent-dark": "var(--palette-pink-700)",
        "color-primary-contrast": "var(--color-dark-contrast)",
        "color-accent-contrast": "var(--color-dark-contrast)"
    },
    "output": "src/assets/react-toolbox"
}

at the end of the package.json file. (Note that you are configuring the themes and the components in this whole object. If you need multiple components such as the AppBar, you need to add APP_BAR into the include array and re-run the command below.)

Now, run:

yarn toolbox

and it will create the folder /assets/react-toolbox and the theme files inside that directory with the components specified in reactToolbox in package.json.

Setting up ThemeProvider

Go into /src/App.js and add:

import './assets/react-toolbox/theme.css';
import theme from './assets/react-toolbox/theme.js';
import ThemeProvider from 'react-toolbox/lib/ThemeProvider';

Now we are ready to set up the ThemeProvider. Just encapsulate the whole <div className="App"> and set the theme accordingly with:

<ThemeProvider theme={theme}>
    <div className="App">
    ....
</ThemeProvider>

Be aware that ThemeProvider only accepts one child, so you’d have to encapsulate everything in one <div> .

Using react-toolbox components

To use components, make sure they are properly set up in your package.json and run yarn toolbox to generate the necessary theme.js and theme.css files.

To add a button, you need to firstly import the component:

import Button from 'react-toolbox/lib/button/Button';

Notice that it’s importing it from /lib/button/Button/ and not /lib/Button anymore. This is new from 2.x of react-toolbox.

Now, just add the button component with:

<Button label="Test Button" raised primary />

and start the web development server with

yarn start

Navigate to http://localhost:3000/ and you should see your button component! Hurrah!

Testing… Testing 1… 2… Test Button…

If you need more information about the latest react-toolbox, head here. And for react-toolbox-themr, head here.

Liang Chun is a Computer Engineering student at the University of Duisburg-Essen. He likes tinkering with code and makes some random things out of his free time. Check out his portfolio here!