Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-classname-module

Package Overview
Dependencies
Maintainers
1
Versions
3
Alerts
File Explorer

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
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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

Keywords

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc