map-to-css-modules provide flexibility to swap class on react libed components
npm install map-to-css-modulesmap-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


- When to use it
- Usage
- Reminders
---
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 (
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.
⚠️ 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"]