Have ideas to improve npm?Join in the discussion! »

    bem-classnames

    1.0.7 • Public • Published

    bem-classnames

    CircleCI npm Bower

    bem-classnames is a simple utility to manage BEM class names on React.

    Inspired by classnames.

    npm install bem-classnames

    Usage

    var cx = require('bem-classnames');
     
    cx(/* classes, [...props|className] */);

    Simple

    var classes = {
      name: 'button',
      modifiers: ['color', 'block'],
      states: ['disabled']
    };
     
    cx(classes, { color: 'green', block: true });  // "button button--green button--block"
    cx(classes, { disabled: true });  // "button is-disabled"
    cx(classes, 'a b', ['c', 'd']);  // "button a b c d"

    Custom prefix

    // Default prefixes:
    //
    // cx.prefixes = {
    //   modifiers: '{name}--',
    //   states: 'is-'
    // };
     
    cx.prefixes.modifiers = '-';
    cx(classes, { color: 'green' });  // "button -green"
     
    // You can add the prefixes
    cx.prefixes.foo = 'foo-';
    classes.foo = ['a', 'b'];
    cx(classes, { a: true, b: true });  // "button foo-a foo-b"

    with React and ES6

    import React from 'react';
    import cx from 'bem-classnames';
     
    class Button extends React.Component {
      render() {
        let classes = {
          name: 'button',
          modifiers: ['color', 'size'],
          states: ['disabled']
        };
     
        return (
          <button className={cx(classes, this.props, this.props.className)}>
            {this.props.children}
          </button>
        );
      }
    }
     
    React.render(
      <Button color="green" size="xl" disabled={true} className="a b">Alo!</Button>,
      document.getElementById('example')
    );
     
    // "button button--green button--xl a b is-disabled"

    for manage the elements of BEM

    class Button extends React.Component {
      render() {
        let classes = {
          button: {
            name: 'button',
            modifiers: ['color', 'size'],
            states: ['disabled']
          },
          button__inner: {
            name: 'button__inner',
            modifiers: ['align']
          }
        };
     
        return (
          <button className={cx(classes.button, this.props, this.props.className)}>
            <span className={cx(classes.button__inner, this.props)}>
              {this.props.children}
            </span>
          </button>
        );
      }
    }
     
    React.render(
      <Button color="green" align="center">Alo!</Button>,
      document.getElementById('example')
    );
     
    // button -> "button button--green"
    // span -> "button__inner button__inner--center"

    Install

    npm i bem-classnames

    DownloadsWeekly Downloads

    1,050

    Version

    1.0.7

    License

    MIT

    Last publish

    Collaborators

    • avatar