classnames-plus v1.0.2

classnames-plus

A simple JavaScript utility for conditionally joining classNames together.

Install with npm, Bower, or Yarn:

npm:

npm install classnames-plus --save

Bower:

bower install classnames-plus --save

Yarn (note that yarn add automatically saves the package to the dependencies in package.json):

yarn add classnames-plus

Use with Node.js, Browserify, or webpack:

Old functions are still available:

var classNamesPlus = require('classnames-plus');
classNamesPlus('foo', 'bar'); // => 'foo bar'

add functions:

var classNamesPlus = require('classnames-plus');
var tabActiveIndex = 0;
var result = classNamesPlus({
  btn: true,
  'btn-pressed': false,
  'btn-over': true
}, 
{
  'fun': function() {
    return 'fun-plus';
  }
},
function () {
    if (0 === tabActiveIndex) {
      return 'active';
    } else {
      return '';
    }    
});
console.log(result);  // => 'btn btn-over fun-plus active'

in React:

import React, { Component } from 'react'
import classNamesPlus from 'classnames-plus'
import './App.css'

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      tabActiveIndex: 0
    }
  } 
  handleClick(tabActiveIndex) {
    this.setState({tabActiveIndex})
  } 
  render() {
    return (
      <ul>
        <li className={
            classNamesPlus('m-tab', () => {
              return this.state.tabActiveIndex === 0 ? 'active': ''
            })
          } 
          onClick={this.handleClick.bind(this, 0)}>css
        </li>
        <li className={
            classNamesPlus('m-tab', () => {
              return this.state.tabActiveIndex === 1 ? 'active': ''
            })
          } 
          onClick={this.handleClick.bind(this, 1)}>javascript
        </li> 
        <li className={
            classNamesPlus('m-tab', () => {
              return this.state.tabActiveIndex === 2 ? 'active': ''
            })
          } 
          onClick={this.handleClick.bind(this, 2)}>html
        </li>                
      </ul>
    );
  }
}

export default App;

License

MIT. Copyright (c) 2018 Xu Tongbao.