CLSX 플러그인 사용법

리액트에서 특정 조건에 따라 className을 적용하고자할 때 편하게 사용할 수 있는 라이브러리가 있다.

 

설치는 아래와 같이 해주고,

$ npm install --save clsx

사용 예시는 다음과 같다.

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

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

clsx의 인수로 객체, 배열, 부울 또는 문자열이 올 수 있다.

clsx(true, false, '', null, undefined, 0, NaN);

인수로 들어온 값이 falsy한 value이면 해당 클래스는 추가되지 않고, truthy한 값만 클래스로 적용되는 방식이다.

이러한 속성을 이용하여 아래와 같이 응용할 수 있다.

// 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'

 

https://github.com/lukeed/clsx#readme

GitHub - lukeed/clsx: A tiny (228B) utility for constructing `className` strings conditionally.