map-to-css-modules
v1.0.6
Published
map-to-css-modules provide flexibility to swap class on react libed components
Downloads
4,422
Readme
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
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"]