React Classname Module

React Classname Module allows you to write your classnames for CSS Modules as easy as without CSS Modules. It's build with classnames, so you have a simple and powerful way to write your classnames.

Notice: This is currently in an early alpha stage

Install

npm install --save react-classname-module

How?

See this example. Yuck, it sucks!

import React from "react";
import styles from "styles.css";
 
class MyComponent extends React.Component {
  render() {
    return (
      <div className={styles.head}>
        <h1 className={styles["headline--h1"]}>Lorem ipsum</h1>
        <div className={styles.content}>
          ...
        </div>
      </div>
    );
  }
}
 
export default MyComponent;

With React Classname Module you can simply write this nice little piece of code:

import React from "react";
import cm from "react-classname-module";
import styles from "styles.css";
 
class MyComponent extends React.Component {
  render() {
    return (
      <div className="head">
        <h1 className="headline--h1">Lorem ipsum</h1>
        <div className="content">
          ...
        </div>
      </div>
    );
  }
}
 
export default cm(MyComponent, styles);

And that's it.

Features

• Supports local and global classnames
• Works with stateless Components
• Works with multiple classes: className="btn btn-highlight"
• Works with classnames

Doesn't support (currently)

• identical local and global classnames
• merging className on a React Component:
  e.g. <Foo className="bar" /> will override the Components className with the CSS Module "bar"

Supporting classnames

Instead of writing a string into classname, you can pass a typical classnames object into it.

let classnames = {
  foo: true,
  bar: true,
  "foo-bar": false
}
 
<div className={classnames}></div>

Changelog

v0.1.1

• Fixed missing defaultProps and propTypes in stateless Components

v0.1.0

• Removed silly dead code
• Support for stateless components

v0.0.1

• initial version