🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

react-classname-module

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-classname-module

Write CSS Modules painless with className and classnames()

0.1.1
latest
Version published
Weekly downloads
1
Maintainers
1
Weekly downloads
 
Created

React Classname Module

react-classname-module on npm

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

FAQs

Package last updated on 01 Dec 2015

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts