https://github.com/lukeed/obj-str

A tiny (96B) library for serializing Object values to Strings.
https://github.com/lukeed/obj-str

Last synced: about 2 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/lukeed/obj-str
• Owner: lukeed
• License: mit
• Created: 2017-04-09T00:37:08.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2023-02-27T16:32:56.000Z (over 1 year ago)
• Last Synced: 2024-04-14T05:17:01.595Z (5 months ago)
• Language: JavaScript
• Homepage:
• Size: 53.7 KB
• Stars: 241
• Watchers: 6
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • Funding: .github/FUNDING.yml
  • License: license

Awesome Lists containing this project

README

        
# obj-str [![CI](https://github.com/lukeed/obj-str/workflows/CI/badge.svg)](https://github.com/lukeed/obj-str/actions) [![codecov](https://badgen.net/codecov/c/github/lukeed/obj-str)](https://codecov.io/gh/lukeed/obj-str)

> 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`](https://npm.im/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](https://github.com/developit/preact/commit/b2c85e3f7fa89ebbf242b00f4cab7619641e3a52) and I wanted a quick, drop-in replacement._

## Install

```

$ npm install --save obj-str

```

## Usage

```js

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.

```js

import React from 'react';

import objstr from 'obj-str';

const TodoItem = ({ text, isDone, disabled }) => (

  


    

    { text }

  

);

```


### Preact

For simple use, the [React](#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!

```js

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-optimize-obj-str) - Babel plugin to transform `obj-str` calls into optimized expressions.

- [clsx](https://github.com/lukeed/clsx) - Drop-in replacement for `obj-str` and `classnames` – handles all (and multiple) input types.

## License

MIT © [Luke Edwards](http://lukeed.com)