prefix-classnames
classnames with prefix
Last updated 2 months ago by nicokam .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install prefix-classnames 
SYNC missed versions from official npm registry.

prefix-classnames

classnames with prefix

You should know 'classnames' before use this tool.

Usage

import pc from 'prefix-classnames';

const px = pc('prefix');

px(); // 'prefix'
px('root'); // 'prefix-root'
px({ root: true }); // 'prefix-root'
px('a', 'b', 'c'); // 'prefix-a prefix-b prefix-c'
px(['a', 'b', 'c']); // 'prefix-a prefix-b prefix-c'
px('a', { bb: true, cc: false, dd: true }); // 'prefix-a prefix-bb prefix-dd'
px(null, false, 'bar', undefined, 0, 1, { baz: null }, ''); // 'prefix-bar prefix-1'
px(['a', ['b', { c: 1, d: false }, ['e', { f: true }, 'g']]]); // 'prefix-a prefix-b prefix-c prefix-e prefix-f prefix-g'

Demo

You can use prefix-classnames in your React Component like this.

style:

@prefix: my-special-component-prefix;

.@{prefix}- {
  &root{

  }

  &dark-mode{

  }

  &header{

  }

  &body{

  }
}

component:

import React from 'react';
import pc from 'prefix-classnames';
import 'MyComponent.less'; // no css-modules

// class prefix
const px = pc('my-special-component-prefix');

export default class MyComponent{
  render(){
    const { darkMode } = this.props;
    return(
      <div className={px('root', {['dark-mode']: darkMode})}>
        <div className={px('header')}>
          Component Header
        </div>
        <div className={px('body')}>
        </div>
      </div>
    );
  }
}

Current Tags

  • 0.0.4                                ...           latest (2 months ago)

4 Versions

  • 0.0.4                                ...           2 months ago
  • 0.0.3                                ...           5 months ago
  • 0.0.2                                ...           6 months ago
  • 0.0.1                                ...           6 months ago
Maintainers (1)
Downloads
Today 0
This Week 153
This Month 962
Last Day 25
Last Week 256
Last Month 542
Dependencies (1)
Dev Dependencies (6)

Copyright 2014 - 2016 © taobao.org |