https://github.com/fayez-nazzal/scn
Simple class names utility that is tiny and fast (75 bytes)
https://github.com/fayez-nazzal/scn
class classes classname classnames
Last synced: 10 months ago
JSON representation
Simple class names utility that is tiny and fast (75 bytes)
- Host: GitHub
- URL: https://github.com/fayez-nazzal/scn
- Owner: fayez-nazzal
- Created: 2023-01-17T07:42:25.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2023-09-27T02:07:54.000Z (over 2 years ago)
- Last Synced: 2025-05-01T21:32:24.342Z (about 1 year ago)
- Topics: class, classes, classname, classnames
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/scn
- Size: 396 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```js
scn('hello', null, false && 'world', undefined); // 'hello'
```
#### Real world example
```js
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
```js
scn('hello', 'world'); // 'hello world'
```
```js
scn(['hello', true], ['world', false]); // 'hello'
```
```js
scn('one', 'two', ['three', undefined]); // 'one two'
```
```js
scn('one', undefined, 'two', false, null, ['three', false]); // 'one two'
```
#### Real world example
```js
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
```ts
import scn from "scn";
interface IPropTypes {
className?: string;
}
const Component = ({ className }: IPropTypes) => (
);
//
//
-- No "undefined" class 🎉
```
## Bundle Size comparison
## License
MIT