One Spaces

A tiny module for making className 😎
We are striving for the best performance and lightweight.
Please check our benchmark result!!!

Installation

npm (commonjs)

npm install one-spaces

browser (iife)

Please download this file.
And embed script tag in your document.

<script src="./dist/one-spaces.js"></script>

Example

VanillaJS

var el = document.getElementById("my-element");

// arguments
el.className = spaces("cls1", "cls2", "cls3");
// array
el.className = spaces(["cls1", "cls2"], ["cls3"]);
// exclude falsy
el.className = spaces(
  "cls1",
  null,
  "cls2",
  false && "none",
  true && "cls3",
  []
);
// mix
el.className = spaces(["cls1", "cls2"], null, "cls3");
// without one-spaces
el.className = "cls1 cls2" + " cls3";

React (jsx)

import React, { useState } from "react";
import spaces from "one-spaces";
import styles from "./Page.css";

export default () => {
  const [isActive, setActive] = useState(false);
  return (
    <div className={styles.container}>
      <span className={spaces(styles.text, isActive && styles.active)}>
        Hello React!
      </span>
      <button onClick={() => setActive(!isActive)}>Toggle</button>
    </div>
  );
};

Angular & Vue

Angular and Vue have their own system for className.
Of course you can use this module with them but not recommended.