https://github.com/spencersteers/perfect-classnames

React classnames made Perfect
https://github.com/spencersteers/perfect-classnames

bem classnames css react

Last synced: 2 months ago
JSON representation

React classnames made Perfect

• Host: GitHub
• URL: https://github.com/spencersteers/perfect-classnames
• Owner: spencersteers
• License: mit
• Created: 2018-12-21T05:18:34.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-12-21T06:02:04.000Z (over 7 years ago)
• Last Synced: 2025-08-24T22:06:50.763Z (10 months ago)
• Topics: bem, classnames, css, react
• Language: JavaScript
• Homepage:
• Size: 54.7 KB
• Stars: 0
• Watchers: 0
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Perfect Classnames [![Build Status](https://travis-ci.com/spencersteers/perfect-classnames.svg?branch=master)](https://travis-ci.com/spencersteers/perfect-classnames) [![Coverage Status](https://coveralls.io/repos/github/spencersteers/perfect-classnames/badge.svg?branch=master)](https://coveralls.io/github/spencersteers/perfect-classnames?branch=master)

React classnames made _Perfect_

## What is it?

A utility for generating class names in React. This library is made to be Perfect _for me_. As my css proclivities change this library will evolve with them in hopes of truly living up to it's name.

## Usage

`perfect-classnames` generates [BEM](http://getbem.com/) style class names from props.

```js

import { createFromProps } from 'perfect-classnames';

const fromProps = createFromProps(

  'FlexComponent', 

  {

    direction: {

      prepend: true,

      values: ['row', 'column'],

    },

    size: ['small', 'medium', 'large'],

    wrap: true,

  }

);

const FlexComponent = (props) => {

  let classes = fromProps(props);

  ...

};

// ['FlexComponent', 'FlexComponent--directionRow', 'FlexComponent--medium', 'FlexComponent--wrap']

```