Nutella Pancake Machine

    obj-str
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    obj-str CI codecov

    A tiny (96B) library for serializing Object values to Strings.

    This module's intended use is for converting an Object with CSS class names (as keys) to a space-delimited className string. Other modules have similar goals (like classnames), but obj-str only does one thing. This is why it's only 100 bytes gzipped!

    PS: I made this because Preact 8.0 removed this built-in behavior and I wanted a quick, drop-in replacement.

    Install

    $ npm install --save obj-str
    

    Usage

    import objstr from 'obj-str';
    
    objstr({ foo:true, bar:false, baz:isTrue() });
    //=> 'foo baz'

    React

    With React (or any of the React-like libraries!), you can take advantage of any props or state values in order to express conditional classes as an object.

    import React from 'react';
    import objstr from 'obj-str';
    
    const TodoItem = ({ text, isDone, disabled }) => (
      <li className={ objstr({ item:true, completed:isDone, disabled }) }>
        <input type="checkbox" disabled={ disabled } checked={ isDone } />
        <label>{ text }</label>
      </li>
    );

    Preact

    For simple use, the React example will work for Preact too. However, you may also define a custom vNode "polyfill" to automatically handle Objects when used inside className.

    Note: For users of Preact 7.1 and below, you do not need this module! Your version includes this behavior out of the box!

    import objstr from 'obj-str';
    import { options } from 'preact';
    
    const old = options.vnode;
    
    options.vnode = vnode => {
      const props = vnode.attributes;
      if (props != null) {
        const k = 'class' in props ? 'class' : 'className';
        if (props[k] && typeof props[k]=='object') {
          props[k] = objstr(props[k]);
        }
      }
      old && old(vnode);
    }

    API

    objstr(input)

    input

    Type: Object

    A hashmap of keys & their truthy/falsey values. Booleans are preferred when speed is critically important.

    Related

    • babel-plugin-optimize-obj-str - Babel plugin to transform obj-str calls into optimized expressions.

    • clsx - Drop-in replacement for obj-str and classnames – handles all (and multiple) input types.

    License

    MIT © Luke Edwards

    Install

    npm i obj-str

    DownloadsWeekly Downloads

    12,264

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    5.37 kB

    Total Files

    7

    Last publish

    Collaborators

    • lukeed