scn
TypeScript icon, indicating that this package has built-in type declarations

1.0.19 • Public • Published

scn - Simple class names

Simple class names utility that is the tiniest (75 bytes) and the fastest.

Now you can write conditional class names more easily and without getting into trouble 😼.

How to use?

Code Style 1: Logical operators

  • Use strings for normal class names.
  • Add logical operators for conditional classes.

Example

scn('hello', null, false && 'world', undefined); // 'hello'

Real world example

scn(
  'text-sm leading-4',
  isError && 'text-error bg-error-opacity',
  !isError && 'text-success bg-success-opacity'
); // 'text-sm leading-4 text-success bg-success-opacity'

Code Style 2: Tuples

  • Use strings for normal class names.
  • Use tuples for conditional styles, if the second value is falsy, the class name will not be included.

Examples

scn('hello', 'world'); // 'hello world'
scn(['hello', true], ['world', false]); // 'hello'
scn('one', 'two', ['three', undefined]); // 'one two'
scn('one', undefined, 'two', false, null, ['three', false]); // 'one two'

Real world example

scn(
  'text-sm leading-4',
  ['text-error bg-error-opacity', isError],
  ['text-success bg-success-opacity', !isError]
); // 'text-sm leading-4 text-success bg-success-opacity'

Example I love to mention

import scn from "scn";

interface IPropTypes {
  className?: string;
}

const Component = ({ className }: IPropTypes) => (
  <div className={scn("hello", className)} />
);

<Component className="world" /> // <div class="hello world" />

<Component /> // <div class="hello" />  -- No "undefined" class 🎉

Bundle Size comparison

image

License

MIT

Package Sidebar

Install

npm i scn

Weekly Downloads

167

Version

1.0.19

License

MIT

Unpacked Size

3.25 kB

Total Files

4

Last publish

Collaborators

  • fayeznazzal