clsx

clsx

clsx는 전달된 매개변수 중 truthy한 값을 기준으로 CSS 클래스 문자열을 생성해 반환하는 유틸리티 함수이다.

설치

npm install clsx

yarn add clsx

pnpm add clsx

동작 방식

• 매개변수 타입
  • 문자열, 숫자 등의 원시타입
    • falsy한 값: 0, -0, 0n, false, '', null, undefined, NaN
    • boolean이 단독으로 쓰인 경우 무시됨
      false는 물론, true여도 반환되지 않음
      true && 'bar처럼 && 연산자를 사용하여 반환할 문자열을 전달할 수 있음
  • 객체
    • value의 값이 truthy한 경우 해당 key를 반환
  • 배열
    • 중첩 배열을 포함하여 재귀적으로 펼쳐서 처리
• 리턴 타입
  • string (truthy한 값만 포함한 문자열)
  • 모든 매개변수가 falsy한 경우, 빈 문자열 ''을 반환
• 작동 과정
  1. 매개변수를 받아와 내부적으로 spread하여 값을 순회
  2. 각 값이 truthy한지 검사
  3. truthy한 값만 골라 최종적으로 하나의 string으로 병합하여 반환

import clsx from 'clsx';
// or
import { clsx } from 'clsx';

// Strings (variadic)
clsx('foo', true && 'bar', 'baz');
//=> 'foo bar baz'

// Objects
clsx({ foo:true, bar:false, baz:isTrue() });
//=> 'foo baz'

// Objects (variadic)
clsx({ foo:true }, { bar:false }, null, { '--foobar':'hello' });
//=> 'foo --foobar'

// Arrays
clsx(['foo', 0, false, 'bar']);
//=> 'foo bar'

// Arrays (variadic)
clsx(['foo'], ['', 0, false, 'bar'], [['baz', [['hello'], 'there']]]);
//=> 'foo bar baz hello there'

// Kitchen sink (with nesting)
clsx('foo', [1 && 'bar', { baz:false, bat:null }, ['hello', ['world']]], 'cya');
//=> 'foo bar hello world cya'