No description, website, or topics provided.
Switch branches/tags
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
src
.babelrc
.gitignore
.npmignore
.travis.yml
README.md
package.json

README.md

react-classmap

Build Status

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

import React, { PropTypes } from 'react';
import { ClassMapMixin } from 'react-classmap';

const GenericButton = React.createClass({
  render() {
    return (
      <button className="generic-button" />
    );
  },
});

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 <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' })
class MyButton {
  // ...
}

Installing

npm install react-classmap

Building

npm run build

Running tests

npm test