@chalarangelo/combine-class-names

JS Utility for cleaner className template literals in React

Usage no npm install needed!

<script type="module">
  import chalarangeloCombineClassNames from 'https://cdn.skypack.dev/@chalarangelo/combine-class-names';
</script>

README

@chalarangelo/combine-class-names

JS Utility for cleaner className template literals in React

Usage

npm i @chalarangelo/combine-class-names

import combineClassNames from '@chalarangelo/combine-class-names';

const MyComponent = ({
  isCool,
  enabled = true,
  active = false,
  className
}) => (
  <div className={combineClassNames`
    my-component
    ${isCool ? 'cool' : 'not-cool'}
    ${enabled ? 'enabled' : '' }
    ${active ? 'active' : ''}
    ${className}
    `}
  />
);

ReactDOM.render(
  <MyComponent isCool enabled className='combined' />,
  document.getElementById('root')
);

// Result: <div class="my-component cool enabled combined"/>