spencersteers / perfect-classnames

React classnames made Perfect

Perfect Classnames

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 style class names from props.

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 direction="row" size="small" wrap />
// ['FlexComponent', 'FlexComponent--directionRow', 'FlexComponent--medium', 'FlexComponent--wrap']