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 a 0.x version. What this actually means is that it works in our project but we're too busy to write tests to be sure that it'll work in your project, too.

Install

npm install --save react-classname-module

How?

See this example. Yuck, it sucks!

importReactfrom"react";importstylesfrom"styles.css";classMyComponentextendsReact.Component{render(){return(<divclassName={styles.head}><h1className={styles["headline--h1"]}>Lorem ipsum</h1><divclassName={styles.content}>
...
</div></div>);}}exportdefaultMyComponent;

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

importReactfrom"react";importcmfrom"react-classname-module";importstylesfrom"styles.css";classMyComponentextendsReact.Component{render(){return(<divclassName="head"><h1className="headline--h1">Lorem ipsum</h1><divclassName="content">
...
</div></div>);}}exportdefaultcm(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.

letclassnames={foo: true,bar: true,"foo-bar": false}<divclassName={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