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

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"]