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

@madappgang/css-class-builder

v1.0.7

Published

A simple utility to compose a single css class name out of multiple separate variables

Downloads

1

Readme

css class builder

What is it?

It is a super small utility that comes in handy when you have to compose a css class name out of multiple variables. The useful part is in being able to chain combinations and apply combinations based on boolean conditions.

It can really increase your code readability as template strings can turn in hell when you got loads of css classes to compose a single class name of.

Real-life example

Let's imagine that we have an interactive element, that has different stylings for different states.

...
return <a className={className}>Hello world!</a>

So, when rendering, we have a couple of boolean variables telling us whether the element should have an additional class name.

const isHovered = true;
const isFocused = false;
...

If order to compose a final css class name we have to write some condition statements:

let className = 'baseClassName';

if (isHovered) {
  className += 'hoverClassName';
}

if (isFocused) {
  className += 'focusClassName';
}

return <a className={className}>Hello world!</a>

First off, the class name is a mutable variable, second - this does not look compact at all.

What we could use instead would look something like this:

 const className = new Combiner('baseClassName')
   .combineIf(isHovered, 'hoverClassName')
   .combineIf(isFocused, 'focusClassName');
   
  return <a className={className}>Hello world!</a>

This way the code looks nice, it's shorter and semanticly perfect.

Installation

It is available on npm, just run the following command:

npm install --save @madappgang/css-class-builder

Usage

You just import the combiner

import Combiner from '@madappgang/css-class-builder';

Combiner is a constructor that accepts an initial class name as a first argument.

const className = new Combiner(baseClassName);

You then can combine that initial class name with any other ones:

const className = new Combiner(baseClassName).combine(additionalClassName)

Feel free to chain combine calls to achieve a better readability:

const className = new Combiner(baseClassName)
  .combine(anotherClassName)
  .combine(yetAnotherClassName)

It also works if you pass all additional classNames as a set of arguments into one combine call:

const className = new Combiner(baseClassName)
  .combine(anotherClassName, yetAnotherClassName)

Sometimes you have a class name but it has to be applied only under certain conditions, so you have an ability to specify those:

const className = new Combiner(baseClassName)
  .combineIf(isHovered, hoverClassName)
  .combineIf(isFocused, focusClassName)
  .combine(commonClassName, someOtherClassName);

You can pass multiple classes to combineIf as well, so use it as you like.

Contribute

If you discovered some features that hasn't been implemented yet, but would be very useful to have - we would be happy to see your pull requests. Anyway, thanks for visiting!

LICENSE

MIT