npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-better-bem

v2.2.3

Published

React component for easy BEM classname handling

Downloads

10

Readme

React-Better-BEM

React component which uses better-bem to easily generate BEM classnames with support for classname maps as imported with CSS Modules.

Install

# install
npm i react-better-bem --save

Usage

import React from 'react';
import Bem from 'react-better-bem';

const BemComponent = () => (
  <Bem>
    <article mod="new">
      <h1 el="title" mod={['large', { bold: true, color: 'blue' }]}>
        Long classnames nobody wants to write
      </h1>
      <p mod="intro">
        BEM is great and all, but who wants to spend all day writing classnames?
      </p>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam.
      </p>
    </article>
  </Bem>
);

Output:

<article class="article article--new">
  <h1 class="article__title article__title--new article__title--large article__title--bold article__title--color-blue">
    Long classnames nobody wants to write
  </h1>
  <p class="article__p article__p--new article__p--intro">
    BEM is great and all, but who wants to spend all day writing classnames?
  </p>
  <p class="article__p article__p--new">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod idem cum vestri faciant, non satis magnam tribuunt inventoribus gratiam.
  </p>
</article>

better-bem

This component uses better-bem for generating classnames. Please refer to the readme in that project for details on how the 'block', 'el' and 'mod' props work.

<Bem/> Props

block

string, array or object The bem 'block' classname(s).

default: ""

mod

string, array or object The bem 'modifier' classname(s).

style

object Classname map (as imported via CSS Modules for example)

default: {}

strict

boolean If true only classnames defined in the classname map passed to the style prop will be outputted. This will prevent the generation of unused classnames.

default: true

Children Props

The <Bem/> component walks over its children and looks for the following props to generate a className prop.

el

string, array or object The bem 'element' classname(s)

default: ""

mod

string, array or object The bem 'modifier' classname(s). Mods are passed down to child components.

default: ""

className

string Default classname props. This classname will be preserved and generated bem classnames will be added to this classname.

Nesting

<Bem/> components can safely be nested. This will generate a new bem block 'namespace'. None of the properties are inherited.

Example

import React from 'react';
import Bem from 'react-better-bem';
import style from './BemComponent.module.css';

const BemComponent = () => (
  <Bem style={style}>
    <div el="container" mod="padded">
      <h1 el="title">This title is an element in the container block</h1>
      <h2 el="title" mod="sub small">
        There's no modifier classname '--small' in the css sheet, so it will not be applied.
      </h2>
      <Bem block="inner" style={style}>
        <p className="paragraph">
          {'This is a new <Bem/> instance. Classnames in the className property will always be passed on and will not be used for classname generation.'}
        </p>
        <p mod={{ bold: true, size: 2, color: 'blue' }}>
          You can use objects for more advanced classname generation.
        </p>
      </Bem>
    </div>
  </Bem>
);
/* BemComponent.module.css */

.container {
  margin: 0 auto;
  max-width: 640px;
}

.container--padded {
  padding: 0 1em;
}

.container__title {
  font-size: 1.8em;
  line-height: 1;
}

.container__title--sub {
  font-size: 1.2em;
}

.inner__p {
  line-height: 1.8;
  max-width: 400px;
}

.inner__p--bold {
  font-weight: bold;
}

.inner__p--size-2 {
  font-size: 2em;
}

.inner__p--color-blue {
  color: blue;
}

Outputted html

<div class="container container--padded">
  <h1 class="container__title">This title is an element in the container block</h1>
  <h2 class="container__title container__title--sub">
    There's no modifier classname '--small' in the css sheet, so it will not be applied.
  </h2>
  <p class="inner__p paragraph">
    This is a new &lt;Bem/&gt; instance. Classnames in the className property will always be passed on and will not be used for classname generation.
  </p>
  <p class="inner__p inner__p--bold inner__p--size-2 inner__p--color-blue">
    You can use objects for more advanced classname generation.
  </p>
</div>