Expose theme objects but use CSS Variables internally in React

React CSS Theming (with JS objects)

This tiny 500byte (not gzipped) component allows JS theme objects to be passed into your component where they're converted into CSS Variables for internal use.

Demo

https://codesandbox.io/s/react-js2css-theme-demo-s6xlx

Why?

• Switching CSS Variables for themes is unpleasant for users of your component, JS objects are easier to deal with.

• CSS Variable changes are much faster than React re-renders via Context which is what CSS-in-JS solutions do.

• If you care about performance and bundle size and want to avoid CSS-in-JS solutions altogether you can still provide a nice JS theme object interface to your users.

Install

yarn add react-js2css-theme

Usage

import JSToCSSTheme from 'react-js2css-theme';

const yourTheme = {
  background: 'black',
  textColor: 'white',
  fontFamily: '"Roboto", sans-serif',
  button: {
    padding: '10px',
  },
};

<JSToCSSTheme namespace="xx" theme={yourTheme}>
  <YourComponent />
</JSToCSSTheme>;

Your component can now make use of the following CSS Variables:

:root {
  --xx-background: black;
  --xx-text-color: white;
  --xx-font-family: 'Roboto', sans-serif;
  --xx-button-padding: 10px;
}

Now try changing the theme object and watch your component's theme change :)

Requirements

useMemo