@travpro/clsx v1.2.0

useClassName

useClassName returns a function that generates correctly formatted class names.

Benefits

Class names are more consistent and follow standard BEM methodology outlined here. Also having this functionality in the form of a hook/function allows easier implementation of dynamic class names

Example usage (spread)

import useClassName from '@travpro/clsx';

const Example = () => {
  const c = useClassName('example');

  return (
    <div {...c()}>
      <h1 {...c('header')}>Lorem Ipsum Dolor Sit</h1>

      <button {...c('button', { green: true })}>Lorem Ipsum</button>

      <p {...c('subtitle', { font: 'large' })}>Lorem Ipsum Dolor Sit Amet Consectetur</p>
    </div>
  );
};

Output

<div class="example__wrapper">
  <h1 class="example__header">Lorem Ipsum Dolor Sit</h1>

  <button class="example__button--green">Lorem Ipsum</button>

  <p class="example__subtitle example__subtitle--font_large">Lorem Ipsum Dolor Sit Amet Consectetur</p>
</div>

Example usage (prop)

import useClassName from '@travpro/clsx/prop';

const Example = () => {
  const c = useClassName('example');

  return (
    <div className={c()}>
      <h1 className={c('header')}>Lorem Ipsum Dolor Sit</h1>

      <button className={c('button', { green: true })}>Lorem Ipsum</button>

      <p className={c('subtitle', { font: 'large' })}>Lorem Ipsum Dolor Sit Amet Consectetur</p>
    </div>
  );
};

Output

<div class="example__wrapper">
  <h1 class="example__header">Lorem Ipsum Dolor Sit</h1>

  <button class="example__button--green">Lorem Ipsum</button>

  <p class="example__subtitle example__subtitle--font_large">Lorem Ipsum Dolor Sit Amet Consectetur</p>
</div>