Join strings with built in control flow and handle separator
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Version Build Status

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


npm install joinable

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


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


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


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.


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(
    [props.hide, "invisible"],
    [props.hasBoarder, "sparkleBoarder"]
  return <div className={myClass}>{props.children}</div>;


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'


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'


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({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'


Install: npm i

npm test - unit tests and eslint

npm run benchmark - run performance tests

This project follows Semantic Versioning