https://github.com/fdaciuk/strclass

A ~200b library to apply CSS classes as strings from objects
https://github.com/fdaciuk/strclass

classname classnames css hacktoberfest react reactjs strclass

Last synced: about 2 months ago
JSON representation

A ~200b library to apply CSS classes as strings from objects

• Host: GitHub
• URL: https://github.com/fdaciuk/strclass
• Owner: fdaciuk
• Created: 2017-02-28T01:49:00.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-03-05T15:29:33.000Z (over 7 years ago)
• Last Synced: 2024-07-19T19:36:17.061Z (2 months ago)
• Topics: classname, classnames, css, hacktoberfest, react, reactjs, strclass
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/strclass
• Size: 98.6 KB
• Stars: 84
• Watchers: 5
• Forks: 5
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# strclass

> A tiny library to apply CSS classes as strings from objects

[![Build Status][travis-image]][travis-url]

[![Coveralls Coverage Status][coverage-image]][coverage-url]

## Installation

```

yarn add strclass

```

## Usage

`strclass` is an _Universal Module_, and can be used as a global,

with AMD, CommonJS or ES Module.

**Signature:**

```

strclass({ className: booleanConditionToShowThisClass }, [defaultClass1, defaultclass2, ..., defaultclassN])

```

**Usage:**

```js

import strclass from 'strclass'

console.log(strclass({ highlighted: true }))

// 'highlighted'

console.log(strclass({ '-active': true }, 'button'))

// 'button -active'

console.log(strclass({ '-active': true }, 'button', 'button-default'))

// 'button button-default -active'

console.log(strclass({ active: false }))

// ''

```

You can use with React, VanillaJS or any other lib/framework:

```js

const Button = ({ active, children }) => (

  

    {children}

  

)

Click!

// will render: Click!

Click!

// will render: Click!

```

If you are using _CSS Modules_, or need to pass the class as a dynamic value, just do:

```js

const ac = 'active'

console.log(strclass({ [ac]: true })) // 'active'

```

## Differences from [`classnames module`](https://github.com/JedWatson/classnames)

**Size**

`strclass` has ~200bytes gzipped.

**Signature**

With `classnames`, you can pass any argument as `String`, `Object` or `Array`.

Otherwise, `strclass` has a signature that should be respected: `Object` as a first argument, with the conditionals,

and any other argument should be a `String`.

If you don't need conditionals, you don't need `strclass`. Just use `strings`.

That's it =)

## License

[MIT](license-url) © Fernando Daciuk

[travis-image]: https://img.shields.io/travis/fdaciuk/strclass.svg?style=flat-square

[travis-url]: https://travis-ci.org/fdaciuk/strclass

[coverage-image]: https://img.shields.io/coveralls/fdaciuk/strclass/master.svg?style=flat-square

[coverage-url]: https://coveralls.io/r/fdaciuk/strclass?branch=master

[license-url]: https://github.com/fdaciuk/licenses/blob/master/MIT-LICENSE.md