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

bemjs

v0.3.4

Published

Library that we use as BEM(Block Element Modifier) class manager.

Downloads

59

Readme

BEMJS

Circle CI

Library to generate BEM class names in javascript.

We built this library to be used on our React projects to easily generate the CSS classnames that we required for our components. See the example for a usage with React. We also implemented some optimizations which should not be noticeable by anyone using this library but are specific to the React use-case.

Install

npm install bemjs --save

Usage

// First require the package
var BEM = require('bemjs');

// Create a BEM block class
var button = BEM.block("button");
console.log(button.toString());
// button

// Add a modifier to the block
var buttonWarning = button.mod("warning");
console.log(buttonWarning + '');
// button button--warning

Examples

We use this in conjunction with React to generate the CSS classnames for our components.

import React from 'react';
import { block } from 'bemjs';

const bButton = block('button');
const bIcon = bButton.el('icon');
const bLabel = bButton.el('label');

class Button extends React.Component {
    render() {
        return (
            <button className={bButton}>
                <span className={bIcon} />
                <span className={bLabel}>
                    {this.props.children}
                </span>
            </button>
        );
    }
}

API

The library exposes two properties. Block which is the actual class and block which is an alias to Block.factory for easy creation of Block instances.

  • Block( name, modifiers, befores, afters )
    Create a new Block instance by using the new keyword. Only the first argument is required.

  • Block.factory( name, modifiers, befores, afters )
    Create a new Block instance by calling the factory method. Only the first argument is required.

  • Block.clone( block )
    Clone an existing block.

  • Block.prototype.el (el)
    Get a new block that is a BEM element of this block.

  • Block.prototype.mod (modifier[, modifier, ...])
    Get a new block that is a BEM modifier of this block. You can pass in as many arguments as you like, every argument will be seen as a modifier.

  • Block.prototype.cmod (condition, modifier[, modifier, ...])
    Get a new block that is a BEM modifier of this block if condition evaluates to true. You can pass in as many arguments as you like, every argument will be seen as a modifier.

  • Block.prototype.before (block[, block, ...])
    Get a new block that is the current block prefixed with another BEM block.You can pass in as many arguments as you like, every argument will be seen as a prefix block. Arguments can be instances of Block or strings.

  • Block.prototype.after (block[, block, ...])
    Get a new block that is the current block postfixed with another BEM block.You can pass in as many arguments as you like, every argument will be seen as a prefix block. Arguments can be instances of Block or strings.

  • Block.prototype.toString ()
    Get the string representation of this block

  • Block.prototype.single ()
    Get the string representation of a the single most specific class generated using this Block.

Optimizations

immutable

The entire library is immutable, so each operation on a Block will result in a new Block being generated. This prevents unexpected side-effect from occuring, so you should never alter the properties of a Block instance.

caching

When attempting to create a new Block instance that will result in a copy of an already existing instance we will return the old instance from an internal cache. Since Block is immutable this will generate the exact same classnames. This optimization prevents React from attempting to re-render each time the className is set to a new instance of Block.

var class1 = BEM.block('button');
var class2 = BEM.block('button');
class1 === class2; // true

Contributing

If you have some issue or code you would like to add, feel free to open a Pull Request or Issue and we will look into it as soon as we can.

License

We are releasing this under a MIT License.

About us

If you would like to know more about us, be sure to have a look at our website, or our Twitter accounts Ambassify, Sitebase, JorgenEvens