@peterjwest/react-bem-classes

react-bem-classes

A utility for writing more concise BEM style classes in React.

Instead of writing this:

import React from 'react';

class Component extends React.Component {
  render() {
    const name = 'Anna', age = 42;
    return <section className="User User-active">
      <ul className="User_details">
        <li className="User_name">
          Name: <span className="User_name_smallText User_name_smallText-highlight">{name}</span>
        </li>
        <li className="User_age italic">Age: {age}</li>
      </ul>
      <form className="User_details_actions">
        <button className="User_details_action">Poke</button>
      </form>
    </section>;
  }
}

You can write this:

import React from 'react';
import { expandClasses } from '@peterjwest/react-bem-classes';

class Component extends React.Component {
  render() {
    const name = 'Anna', age = 42;
    return expandClasses(<section className="User &-active">
      <ul className="&_details">
        <li className="&&_name">
          Name: <span className="&_smallText &-highlight">{name}</span>
        </li>
        <li className="&&_age italic">Age: {age}</li>
      </ul>
      <form className="&_actions">
        <button className="&_action">Poke</button>
      </form>
    </section>);
  }
}

The current block and any elements are prepended onto each class with a selector character &. Using two selector characters (e.g. &&) ignores the last current element, which allows more flexible nesting (You can use more selector characters to ignore more elements).

By default this uses the React BEM style, which is more concise and more legible in my opinion.

If you want to use the original BEM style you can customise the delimiters:

import React from 'react';
import { expandClasses } from '@peterjwest/react-bem-classes';

const expandClassesClassic = (input) => expandClasses(input, { element: '__', modifier: '--' });

class Component extends React.Component {
  render() {
    const name = 'Anna', age = 42;
    return expandClassesClassic(<section className="User &--active">
      <ul className="&__details">
        <li className="&&__name">
          Name: <span className="&__small-text &--highlight">{name}</span>
        </li>
        <li className="&&__age italic">Age: {age}</li>
      </ul>
    </section>);
  }
}

You can also change the selector character:

import React from 'react';
import { expandClasses } from '@peterjwest/react-bem-classes';

class Component extends React.Component {
  render() {
    const name = 'Anna', age = 42;
    return expandClasses(<section className="User %-active">
      <ul className="%_details">
        <li className="%%_name">
          Name: <span className="%_smallText %-highlight">{name}</span>
        </li>
        <li className="%%_age italic">Age: {age}</li>
      </ul>
    </section>, { selector: '%' });
  }
}

If you're using Typescript, you can instead use the decorator:

import React from 'react';
import expandClasses from '@peterjwest/react-bem-classes';

class Component extends React.Component {
  @expandClasses({ selector: '%' })
  render() {
    const name = 'Anna', age = 42;
    return <section className="User %-active">
      <ul className="%_details">
        <li className="%%_name">
          Name: <span className="%_smallText %-highlight">{name}</span>
        </li>
        <li className="%%_age italic">Age: {age}</li>
      </ul>
    </section>;
  }
}

You can also use the utility with CommonJS and/or without JSX support:

const { createElement, Component } = require('react');
const { expandClasses } = require('@peterjwest/react-bem-classes');

class SomeComponent extends Component {
  render() {
    const name = 'Anna', age = 42;
    return expandClasses(
      createElement('section', { className: 'User %-active' },
        createElement('ul', { className: '%_details' },
          createElement('li', { className: '%%_name' }, [
            'Name: ',
            createElement('span', { className: '%_smallText %-highlight' }),
          ]),
          createElement('li', { className: '%%_age_' }, `Age: ${age}`),
        ),
      ),
      { selector: '%' }
    );
  }
}