react-classmap

This hook lets you reconcile third-party React components with your CSS framework of choice by defining a mapping of additional class names to apply to children DOM components that have a given class name.

Usage

importReact,{PropTypes}from'react';import{ClassMapMixin}from'react-classmap';constGenericButton=React.createClass({render(){return(<buttonclassName="generic-button"/>);},});constMyButton=React.createClass({mixins: [ClassMapMixin({// Children DOM components with the `generic-button` className will also// have the `fa fa-cog` classNames applied to them.'generic-button': 'fa fa-cog',}),],render(){return<GenericButton/>;},});React.renderToString(<MyButton/>);// => <button class="generic-button fa fa-cog"></button>

If you're using ES6 classes instead of React.createClass, there's a higher-order component.

import{classMap}from'react-classmap';classMap(MyButton,{'generic-button': 'fa fa-cog'});

With ES7 decorators:

@classMap({'generic-button': 'fa fa-cog'})classMyButton{// ...}

Installing

npm install react-classmap

Building

npm run build

Running tests

npm test