GithubHelp home page GithubHelp logo

gaearon / react-toolbox-themr Goto Github PK

View Code? Open in Web Editor NEW

This project forked from react-toolbox/react-toolbox-themr

5.0 2.0 0.0 53 KB

A tool to statically extract and generate custom themes for React Toolbox

License: MIT License

JavaScript 100.00%

react-toolbox-themr's Introduction

npm version Build Status NPM Status

React Toolbox Themr

A command line tool to help you extract react-toolbox style modules to static files so you can integrate it in nearly any stack.

$ yarn add --dev react-toolbox-themr [email protected]

Note it only works with React Toolbox 2.0 beta. The output path shown in the GIF is outdated, now by default the assets are generated at src/toolbox.



React Toolbox 2.0 styles have been rewritten using 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 thought, and some people find difficult to integrate the library in their current stack, specially when Webpack 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. It will help you extracting the CSS modules into static files you can import in your application, making react-toolbox very easy to adopt.


First of all you have to add react-toolbox-themr to your project as a development package. You can either use npm or yarn.

$ yarn add --dev react-toolbox-themr

Once installed you can define the configuration in the package.json file of your project or through the --config <path/to/json> option. If you want to use your package.json to store configuration, the reactToolbox key should be used on the top level to find your settings:

"reactToolbox": {
  "include": [
  "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": "assets/react-toolbox"

Then you must add a script in your package.json to run the builder.

"scripts": {
  "toolbox": "react-toolbox-themr"

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:

  • 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.

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 ThemeProvider at the top of your app passing the theme.

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

const App = ({ children }) => (  
  <ThemeProvider theme={theme}>

export default App;

Although ThemeProvider is exposed by react-toolbox, you can add your own importing directly from react-css-themr. Finally, make sure the components you use from react-toolbox are imported without bundled css. Check the documentation for more details.

That's all!

Command line usage

As react-toolbox-themr is a command line utility, you can use it from the command line passing options inline like:

$ react-toolbox-themr -i BUTTON DATE_PICKER -o my-theme/

But we really encourage you to use either package.json or a custom configuration file so it's more clear to visualize your configuration. Passing configuration variables is allowed only via package of custom config file.

Configuration options

All of these options have the same name if you use them in your package.json, a custom json file or directly through the command line. Some of them are aliased to be used from the command line but passing configuration variables is only allowed from a package of custom json file configuration. Everything is optional.

  • config: Path to a custom configuration json file. Should be used only via command line.
  • path: Path to react-toolbox. Usually you don't need to change but you can set your own if your setup is more complex. Aliased as -p.
  • include: Array of components that will be included in the theme. Aliased as -i. Accepted values are 'AUTOCOMPLETE', 'AVATAR', 'BUTTON', 'CARD', 'CHECKBOX', 'CHIP', 'DATE_PICKER', 'DIALOG', 'DRAWER', 'DROPDOWN', 'INPUT', 'LAYOUT', 'LINK', 'LIST', 'MENU', 'NAVIGATION', 'OVERLAY', 'PROGRESS_BAR', 'RADIO', 'RIPPLE', 'SLIDER', 'SNACKBAR', 'SWITCH', 'TABLE', 'TABS', 'TIME_PICKER' and 'TOOLTIP'.
  • output: Path where both Javascript and CSS files will be generated. Aliased as -o. Defaults to src/toolbox.
  • javascript: Path where the Javascript theme file will be generated. You can optionally include the name of the file. Takes precedence over output, aliased as -j.
  • styles: Path where the CSS theme file will be generated. You can optionally include the name of the file. Takes precedence over output, aliased as -s.
  • customProperties: An object where keys are custom properties names defined in react toolbox and values are references to other variables of absolute values. It can't be used from the command line. These variables override the defaults defined in React Toolbox.


The project is originally authored by Javi Velasco as an effort of providing a better adoption experience for React Toolbox. Any comments, improvements or feedback are highly appreciated.


This project is licensed under the terms of the MIT license.

react-toolbox-themr's People


abumalick avatar anri-asaturov avatar bernharduw avatar javivelasco avatar sparty02 avatar tuchk4 avatar wtgtybhertgeghgtwtg avatar


 avatar  avatar  avatar  avatar  avatar


 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.