clsx 활용하기

next 14에서 발표한 next learn 확인 중 

using the clsx library to toggle class names

 

이와 같은 글을 확인하였고, clsx가 무엇인지 찾아보게 되었다

위에서 소개한 예시는 아래와 같다

import clsx from 'clsx';
 
export default function InvoiceStatus({ status }: { status: string }) {
  return (
    <span
      className={clsx(
        'inline-flex items-center rounded-full px-2 py-1 text-sm',
        {
          'bg-gray-100 text-gray-500': status === 'pending',
          'bg-green-500 text-white': status === 'paid',
        },
      )}
    >
    // ...
)}

 

 

status 조건에 따른 변경이 가능하다는점이다.

추가로 깃헙 페이지 확인시 아래와 같은 문자 합치기도 가능하다

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

 

 

위와 같이 크게 어려운 내용은 없으니 쉽게 사용해보자!