Joinable NPM | npm.io

Joinable

Join strings easily by removing the repetitive falsy checks. Construct strings like form validation, CSS classes, URLs and more.

Usage

npm install joinable

import joinable from "joinable";
joinable("potato", undefined, "rice"); // => 'potato rice'

About

What is Joinable: A library to join strings together without the need to check if a value is a falsy like undefined.

Why use Joinable: Keep your code base clean by removing the repetitive falsy checks and improve the readability.

More information about Joinable

Handle falsy false, 0, "", undefined, null, NaN

API

joinable is the default export and an alias of joinStrings.

joinable(...joinables [, options]) : string

import joinable from 'joinable';
joinable('potato', undefined, 'rice', null, 'carrot'); // => 'potato rice carrot'

// Change separator
joinable('potato', 'rice', 'carrot', {separator: ','}); // => 'potato,rice,carrot'

Join strings based on another value like a boolean.

import joinable from 'joinable';
joinable('potato', [true, 'spinach']); // => 'potato spinach'
joinable('potato', [false, 'spinach']); // => 'potato'
joinable('potato', [null, 'spinach']); // => 'potato'

Have a default value if a falsy passed.

import joinable from 'joinable';
joinable('potato', [true, 'spinach', 'beetroot']); // => 'potato spinach'
joinable('potato', [false, 'spinach', 'beetroot']); // => 'potato beetroot'
joinable('potato', [null, 'spinach', 'beetroot']); // => 'potato beetroot'

Joining classNames in ReactJS

Problem

Example of typical logic string concatenation in ReactJS component with if statements. General issues: verbose, unnecessary repetitive complexity and mutation:

import React from "react";

const MyComponent = props => {
  let myClass = "panel ";
  if (props.hide) myClass += "invisible ";

  if (props.hasBoarder) myClass += "sparkleBoarder ";

  if (props.className) myClass += props.className;

  return <div className={myClass}>{props.children}</div>;
};

While this works fine you will probably need to repeat that similar flow for a lot of components and some will have additional complexity round it.

Solution

Same component as above but lets keep it clean with joinable.

import React from "react";
import joinable from "joinable";

const MyComponent = props => {
  const myClass = joinable(
    "potato",
    props.className,
    [props.hide, "invisible"],
    [props.hasBoarder, "sparkleBoarder"]
  );
  return <div className={myClass}>{props.children}</div>;
};

prefixStrings

prefixStrings(prefix, ...joinables [, options]) : string

import { prefixStrings } from 'joinable';
prefixStrings('pre-', undefined, 'rice', null, 'carrot'); // => 'pre-rice pre-carrot'
prefixStrings(falsy, undefined, 'rice', null, 'carrot'); // => 'rice carrot'
prefixStrings('pre-', undefined, 'rice', null, 'carrot', {separator: ','}); // => 'pre-rice,pre-carrot'

joinExp

Note: no ifArrays can be used in joinables

joinExp(regexp, ...joinables [, options]) : string

import { joinExp } from 'joinable';
joinExp(/m+/, 'cucumber'); // => 'cucumber'
joinExp(/(m|n)+/, 'cucumber', false, 'sandwich'); // => 'cucumber sandwich'
joinExp(/r+/, 'cucumber'); // => ''
joinExp('', 'cucumber'); // => throw Error 'First parameter should be of RegExp type'

joinIf

joinIf(ifArray)

import { joinIf } from 'joinable';
joinIf([true, 'spinach']); // => 'spinach'
joinIf([1==2, 'spinach']); // => null
joinIf([1==1, 'spinach', 'broccoli']); // => 'spinach'
joinIf([1==2, 'spinach', 'broccoli']); // => 'broccoli'
joinIf('lettuce'); // => null

Useful to make joining easier to read combine both joinable and joinIf.

import joinable, { joinIf } from 'joinable';
joinable('potato', joinIf([true, 'spinach'])) # => 'potato spinach'

joinObject

joinObject({object} [, separator, separator]) : string

import { joinObject } from 'joinable';
joinObject({ chicken: 'burger', spare: 'ribs' }) // => 'chicken=burger&spare=ribs'
joinObject({ chicken: 'burger', spare: 'ribs' }, ',') // => 'chicken=burger,spare=ribs'
joinObject({ chicken: 'burger', spare: 'ribs' }, ';', ',') // => 'chicken,burger;spare,ribs'
joinObject({ salad: null, chicken: 'burger', spare: 'ribs' }, ';', ',') // => 'chicken,burger;spare,ribs'