lutece / one-spaces

A tiny module for making className 😎

One Spaces

A tiny module for making className 😎

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 = OneSpaces('cls1', 'cls2', 'cls3');
// array
el.className = OneSpaces(['cls1', 'cls2'], ['cls3']);
// exclude falsy
el.className = OneSpaces('cls1', null, 'cls2', false && 'none', true && 'cls3');
// mix
el.className = OneSpaces(['cls1', 'cls2'], null, '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.