@mariosant/cn

Easy class names handling!

Cn is a simple utility to help you manage class names in the modern app development ecosystem.

Installation

Just add @mariosant/cn to your package.json.

$ npm install @mariosant/cn

# or
$ yarn add @mariosant/cn

You can now import the module and use it like

import cn from "@mariosant/cn";

Usage

Using cn is pretty simple. It is inspired by the well known Classnames package, but solves a few edge cases.

import cn from '@mariosant/cn';

const isActive = true;
const SomeComponent = () => <Button className={cn('btn', [isActive, 'active'])} .../> // classnames would be 'btn active'

Why the tuple syntax, you may ask. Well, tuple allows to pass an alternative classname, optionally. Consider the following:

import cn from '@mariosant/cn';

const isActive = false;
const SomeComponent = () => <Button className={cn('btn', [isActive, 'active', 'inactive'])} .../> // classnames would be 'btn inactive'

Development

Easy enough!

$ yarn install  # to install dependencies
$ yarn test     # to run the test suite

Meta

Marios Antonoudiou – @marios_ant – [e-mail]

Distributed under the MIT license.

https://github.com/mariosant/cn

Contributing

1. Fork it (https://github.com/mariosant/cn/fork)
2. Create your feature branch (git checkout -b feature/fooBar)
3. Commit your changes using a semantic commit message.
4. Push to the branch (git push origin feature/fooBar)
5. Create a new Pull Request