React BEM

This is help package for use BEM methodology in React components

Install

npm i -S @bikejs/react-bem

Usage

Example for use as decorator

import React from 'react';
import { BEM } from '@bikejs/react-bem';

@BEM('my-component')
export class Component extends React.PureComponent {
  render() {
    const { bem } = this.props;

    return (
      <section className={bem()}>
        <header className={bem('header')}>
          Header
        </header>
        <article className={bem('main', { mod: true, type: 'test' })}>
          Main
        </article>
      </section>
    );
  }
}

Example for use as hook

import React from 'react';
import { useBEM } from '@bikejs/react-bem';

export const MyComponent = () => {
  const bem = useBEM('my-component');

  return (
    <section className={bem()}>
      <header className={bem('header')}>
        Header
      </header>
      <article className={bem('main', { mod: true, type: 'test' })}>
        Main
      </article>
    </section>
  );
}

className proxying is also supported

import React from 'react';
import { BEM } from '@bikejs/react-bem';

@BEM('my-component')
class Component extends React.Component {
  render() {
    const { bem } = this.props;
    return <div className={bem()}/>;
  }
}

@BEM('my-app')
class App extends React.Component {
  render() {
    const { bem } = this.props;
    return <Component className={bem()}/>;
  }
}

// App render result:
// <div class="my-app my-component"></div>