https://github.com/moishinetzer/classnames-clone
https://github.com/moishinetzer/classnames-clone
Last synced: 5 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/moishinetzer/classnames-clone
- Owner: moishinetzer
- License: mit
- Created: 2022-03-27T11:48:10.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-03-31T11:04:51.000Z (about 4 years ago)
- Last Synced: 2025-11-30T20:51:16.589Z (7 months ago)
- Language: TypeScript
- Size: 1.54 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ClassNames Clone
> Created for fun, using the latest technologies that make it tiny and pretty fast
### Not Another Clone 🥱
- Blazing Fast⚡
- Teensy Small (204B) 🤏
- Really Easy To Use 👶
- Completely Type Safe 👷♀️
### Installation
To install classnames-clone, use:
```bash
npm i classnames-clone
```
### Well What Does It Do?
Ever wanted to conditionally render your classnames? Well before your code used to look like this:
```js
Hmm not the best
```
Now it looks like this:
```js
Yummy! 🥞
```
### Usage:
```js
import { classNames } from "classnames-clone";
// Joins strings
classNames("bg-white", "text-red-300") // ==> returns "bg-white text-red-300"
// Joins object keys with truthy values
classNames("bg-white", {"text-red-300": true}) // ==> returns "bg-white text-red-300"
// Even flattens out arrays
classNames("bg-white", ["text-red-300"]) // ==> returns "bg-white text-red-300"
// Ignores falsy values
classNames("bg-white", {"text-red-300": false}) // ==> returns "bg-white"
```
#### Opinions:
The official package for classnames allows numbers in it's type definition, however that doesn't make sense when it comes to writing classes so for this package's purpose that has been left out.
Perfect for conditional state class formatting like isActive etc.
This package was created using [TSDX](https://tsdx.io/)