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

classname-generator

v0.0.2

Published

Vladimir Novick <[email protected]>

Downloads

2

Readme

classNameGenerator

BEM methodology inspired util that let's you create classNames in React by passing proper configuration. You can also use library outside of React since there are no React dependencies

High-level API:

classNameGenerator is using some key concepts and names from BEM methodology. By default BEM naming is disabled but can be enabled via configuration. It's compatible with AMD, CommonJS and also can be used as browser global.

Key concepts

Before describing classNameGenerator it's important to understand some key concepts of classNames naming convention. There are three main entities that should be explained:

Block

A logically and functionally independent page component that can be reused.

Element

A constituent part of a block that can't be used outside of it.

Modifier

className that defines appearance or behavior of an element/block. For example 'active' class on active menu element or 'hidden' class on hidden element are modifiers.

Getting Started

classNameGenerator is an instance of ClassNameGenerator class which is created by passing configuration object with desired block and element names. classNameGenerator.Class is ClassNameGenerator Class and can be used to create custom classNameGenerator with different configuration.

Following are examples of desired markup, configuration object that should be passed to classNameGenerator to achieve relevant classNameBlock

Basic Usage

Simple block with some elements inside

Let's say you want to create this kind of markup:

<div class="test-container">
  <div class="panel"></div>
  <div class="card"></div>
</div>

In this case "test-container" is a block with two elements "panel" and "card"

In order to create classNameObject with classNameGenerator do the following:

var classNameGenerator = require('classname-generator');

var classNameBlock = classNameGenerator({
  name: 'test-container',
  elements: [{
    name: 'panel'
  },
  {
    name: 'card'
  }]
})

var Element = React.createClass({
  render: function() {
    return (
      <div className={classNameBlock}>
        <div className={classNameBlock.panel}></div>
        <div className={classNameBlock.card}></div>
      </div>
    )
  }
})

React.render(<Element />,document.body);
Simple block with some elements and different modifiers

The interesting part starts when you start using modifiers.

Let's say you need the following markup:

<div class="tab-container active">
  <div class="panel wide"></div>
  <div class="card hidden"></div>
</div>

As you can see from the markup above 'active', 'wide', 'hidden' logically define appearance of 'tab-container', 'panel' and 'card' respectively

So they will be called modifiers and the syntax of classNameGenerator will be as following:

var classNameGenerator = require('classname-generator');

var classNameBlock = classNameGenerator({
  name: 'test-container',
  elements: [{
    name: 'panel',
    modifiers: {
      wide: true,
      hidden: false,
    }
  },
  {
    name: 'card'
    modifiers: {
      hidden: true
    }
  }],
  modifiers: {
    active: true
  }
})

var Element = React.createClass({
  render: function() {
    return (
      <div className={classNameBlock}>
        <div className={classNameBlock.panel}></div>
        <div className={classNameBlock.card}></div>
      </div>
    )
  }
})

React.render(<Element />,document.body);

Usage Variations:

Elements access:

All elements can be accessed through elements object or directly

classNameBlock.elements.panel = classNameBlock.panel
classNameBlock.elements.card = classNameBlock.card
Getting block/elements name directly without accessing name property

Calling toString will print element name:

//calling toString method
classNameBlock.toString();

//Appending to string (will automatically call toString);
"" + classNameBlock;


//ES6 template strings usage
`${classNameBlock}`
Modifiers manipulations

Modifiers values can be changed on the fly by assigning new value to modifier. For example with the same config object as above let's change hidden modifier on panel element:

classNameBlock.panel.hidden = true;

classNameBlock.panel.name === classNameBlock.panel.toString === classNameBlock.elements.panel.name === classNameBlock.elements.panel.toString() === 'panel wide hidden'

Aliases

Alias is used in order to differentiate elements with the same name. Aliases as names cannot have duplicate values.

Let's say you want to create the following markup:

<nav>
  <ul class="menu">
    <li class="item active"></li>
    <li class="item"></li>
    <li class="item"></li>
  </ul>
</nav>

As you can see we have several elements with duplicate names but one of them will have active modifier set to true.

The javascript will be as following:

var classNameGenerator = require('classname-generator');

var classNameBlock = classNameGenerator({
  name: 'menu',
  elements: [{
    name: 'item',
    modifiers: {
      active: false,
    }
  },
  {
    name: 'item',
    alias: 'activeItem',
    modifiers: {
      active: true,
    }
  }]
})

var Element = React.createClass({
  render: function() {
      return (
        <nav>
          <ul className={classNameBlock}>
            <li className={classNameBlock.activeItem}></li>
            <li className={classNameBlock.item}></li>
            <li className={classNameBlock.item}></li>
          </ul>
        </nav>
      )
    }
});

React.render(<Element />,document.body);

Custom Configuration and BEM

In BEM methodology the block level element will have unique class and child elements or child element modifiers inside the block will have prefix of parent class

For example class naming will be as following

<div class="tab-container tab-container--active">
  <div class="tab-container__panel tab-container--wide"></div>
  <div class="tab-container__card tab-container--hidden"></div>
</div>

classNameGenerator supports BEM naming convention if you create it like this:

var ClassNameGenerator = require('classname-generator').Class;
var customGenerator = new ClassNameGenerator({bemEnabled: true});

var classNameBlock = customGenerator({
  name: 'test-container',
  elements: [{
    name: 'panel',
    modifiers: {
      wide: true,
      hidden: false,
    }
  },
  {
    name: 'card',
    modifiers: {
      hidden: true
    }
  }],
  modifiers: {
    active: true
  }
})

var Element = React.createClass({
  render: function() {
    return (
      <div className={classNameBlock}>
        <div className={classNameBlock.panel}></div>
        <div className={classNameBlock.card}></div>
      </div>
    )
  }
})

React.render(<Element />,document.body);

There are several other configurable properties:

| Configuration Option | Value type | Default | Description | | -------------------- | ---------- | ------- | ---------------------------------------------- | | elementSeperator | String | "__" | separator between parent block name and element| | modSeperator | String | "--" | separator between element name and modifier name| | modValueSeperator | String | "-" | In case modifier value is other than boolean this separator wil be between modifier key name and value.| | classSeperator | String | " " | This is default separator between class names| | bemEnabled | bool | false | passing false will strip generated classNames of seperators and will use only raw element and modifiers names. For example some-class some-class--hidden will be generated as some-class hidden|