https://github.com/mariuslundgard/suit-class-name

A convenient way to generate SUIT class names in JavaScript.
https://github.com/mariuslundgard/suit-class-name

Last synced: 2 days ago
JSON representation

A convenient way to generate SUIT class names in JavaScript.

• Host: GitHub
• URL: https://github.com/mariuslundgard/suit-class-name
• Owner: mariuslundgard
• Created: 2016-02-20T10:42:52.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-03-17T06:53:39.000Z (over 8 years ago)
• Last Synced: 2024-10-06T11:08:48.547Z (about 1 month ago)
• Language: JavaScript
• Size: 13.7 KB
• Stars: 1
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# suit-class-name [![Build Status](https://travis-ci.org/mariuslundgard/suit-class-name.svg?branch=master)](https://travis-ci.org/mariuslundgard/suit-class-name) [![Coverage Status](https://img.shields.io/coveralls/mariuslundgard/suit-class-name/master.svg?style=flat)](https://coveralls.io/github/mariuslundgard/suit-class-name?branch=master) [![npm version](https://img.shields.io/npm/v/suit-class-name.svg?style=flat)](https://www.npmjs.com/package/suit-class-name)

A utility library for creating [SUIT](https://github.com/suitcss/suit)-style class names.

## Installation

```sh

npm install suit-class-name

```

## Usage

```js

import suit from 'suit-class-name'

suit({

  namespace: 'ns',

  block: 'Button',

  element: 'label'

})

// "ns-Button-label"

suit({

  block: 'Button',

  element: 'label',

  modifier: 'dark'

})

// "Button-label--dark"

suit({

  block: 'Button',

  modifier: 'dark',

  state: {active: true},

  utils: ['cf']

})

// "Button--dark is-active util-cf"

```

With React:

```js

import React from 'react'

import suit from 'suit-class-name'

function block (params) {

  return suit(

    Object.assign(params || {}, {block: 'Message'})

  )

}

const Message = React.createClass({

  render () {

    return (

      


        


          Hello, world!

        

      

    )

  }

}

```


See more examples in `test/`.