map-to-css-modules

map-to-css-modules is a function that is used for preparing React component distributed as a npm package to keep the ability to remove an already set className.

Master

Dev

Table of Contents

• When to use it
• Usage
• Reminders

---

When to use it

You should use it when you are providing react-component and want to keep the flexibility to detach css classes at any moment.

Installation

We recommend to keep it in dependency using --save

npm install map-to-css-modules --save

Usage

Take this react class as an example:

import React from 'react';
import PropTypes from 'prop-types';
import mapToCssModules from 'map-to-css-modules';

class Example extends React.Component {
  static propTypes = {
    cssModule: PropTypes.object,
  }

  render() {
    const {
      className,
      cssModule,
      tag: Tag,
      ...attributes
    } = this.props;

    return (
      <Tag
        className={mapToCssModules(cn('w-100', className, {
          focus,
          active,
          disabled,
          [`text-${color}`]: color,
        }), cssModule)}
        {...attributes}
      />
    );
  }
}

For example, you can see there is a css class w-100 attached to this component. It is now possible to disable or replace the class name.

<Example tag="div" cssModule={{ 'w-100': 'w-75' }} />

Reminders

⚠️ When using this plugin, you must import in the first line of your application javascript entry file babel-polyfill: ⚠️

import "babel-polyfill";

To enable ES features in older browsers, you MUST include in the package.json

"browserslist": ["ie >= 9", "last 2 versions"]
// or
"browserslist": ["ie >= 10", "last 2 versions"]