Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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