https://github.com/botify-labs/react-classmap
https://github.com/botify-labs/react-classmap
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/botify-labs/react-classmap
- Owner: botify-labs
- Created: 2015-05-11T13:04:56.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2016-08-25T15:17:46.000Z (almost 10 years ago)
- Last Synced: 2025-10-12T17:35:44.258Z (8 months ago)
- Language: JavaScript
- Homepage:
- Size: 20.5 KB
- Stars: 27
- Watchers: 18
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-classmap
[](https://travis-ci.org/botify-labs/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
```js
import React, { PropTypes } from 'react';
import { ClassMapMixin } from 'react-classmap';
const GenericButton = React.createClass({
render() {
return (
);
},
});
const MyButton = 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 ;
},
});
React.renderToString();
// =>
```
If you're using ES6 classes instead of `React.createClass`, there's a [higher-order component](https://gist.github.com/sebmarkbage/ef0bf1f338a7182b6775).
```js
import { classMap } from 'react-classmap';
classMap(MyButton, { 'generic-button': 'fa fa-cog' });
```
With [ES7 decorators](https://github.com/wycats/javascript-decorators):
```js
@classMap({ 'generic-button': 'fa fa-cog' })
class MyButton {
// ...
}
```
## Installing
```
npm install react-classmap
```
## Building
```
npm run build
```
## Running tests
```
npm test
```