React css utils

Simplifies usage of global css utilities while using react. Preferably used with css modules.

At the moment the implementation and the API is heavily inspired/stolen from react-redux, this will change as soon as there is a more clear vision on what this library is supposed to do.

Example

Check the example.

Usage

Create an object that represents the different utils that you want to provide to the components, each key represents the name of an util. The value of the util can either be an Array, Object or a String. Depending of the type of value you provide it will behave differently.

  {
    /**
     * Passing a string as the util value will make the util behave as a boolean.
     */
    flex: 'flex',

    /**
     * If you pass an array the keys will be used as the class names.
     */
    color: ['red', 'blue', 'green'],

    /**
     * When passing an object the value will be used as the class name and the
     * key will be used to identify the util. This is mainly used when using
     * css modules as each class name will have an unique identifier.
     */
    fontSizes: {
      small: 'fontSize_small_3iuLn',
      large: 'fontSize_large_1D5ji'
    }
  }

Here's an example with CSS modules enabled.

  .xxsmall {
    font-size: var(--fontSizeXXSmall);
  }

  .xsmall {
    font-size: var(--fontSizeXSmall);
  }

  .small {
    font-size: var(--fontSizeSmall);
  }

  .base {
    font-size: var(--fontSizeBase);
  }

  .medium {
    font-size: var(--fontSizeMedium);
  }

  import fontSizes from './fontSizes.css';

  const utils = {
    fontSizes
  };

  export default utils;

Add the provider to the root of your rendering context and pass the utils dictionary you created as a prop to it.

  import {provider as CSSUtilsProvider} from 'react-css-modules';
  import utils from './styles/utils';

  const targetEl = document.getElementById('root')

  ReactDOM.render(
    <CSSUtilsProvider utils={utils}>
        <App />
    </CSSUtilsProvider>,
    targetEl
  );

Add the connect hoc function to one your components

  import {connect as connectCSSUtils} from 'react-css-modules';

  @connectCSSUtils()
  export default View extends React.Component {
    render() {
      return (
        <div className={this.props.className}>
          {this.props.children}
        </div>
      );
    }
  }

Use the component

  export default App extends React.Component {
    render() {
      return (
        <View fontSize='small'>
          ...
        </View>
      );
    }
  }

Todo

• [ ] Allow passing options to the connect function, whitelist/blacklist of utils
• [ ] Allow passing utils directly to the connect function if you don't want to use context to provide the utils.
• [ ] Remove dependency on ramda
• [ ] Add tests