react-suitcssify

A React component utility to generate CSS class names that conform to SUIT CSS naming conventions.

This utility can be used as a higher-order component, decorator, mixin, or utility function. This means that you can use it with React components defined using createClass, ES2015 classes, or stateless-functional components.

Provides a general purpose getClassName(options) method that accepts a variety of options for generating SUIT CSS conformant class names.

1getClassName({
2  baseComponentName: string,
3  className: string,
4  componentName: string,
5  descendantName: string,
6  modifiers: string,
7  namespace: string,
8  states: string,
9  utilities: string
10})

When using the decorator or mixin approach, the following defaults are provided.

• className - Component.props.className Note that Component.propTypes.className is also added for convenience.
• componentName - Component.displayName || Component.name
• namespace - Component.namespace
• utilities - Component.props.utilities Note that Component.propTypes.utilities is also added for convenience.

When using the higher-order approach, the following defaults are provided.

• className - Component.props.className
• componentName - Component.displayName || Component.name
• utilities - Component.props.utilities

Installation

npm install react-suitcssify

Usage

ES2015 class with a decorator

1import React from 'react';
2import ReactDOM from 'react-dom';
3import SuitCssify from 'react-suitcssify';
4
5@SuitCssify.decorator
6class MyComponent extends React.Component {
7  render() {
8    return <div className={ this.getClassName() }></div>
9  }
10}
11
12ReactDOM.render(<MyComponent/>, document.body);

• NOTE: Your codebase must support ES7 decorators to use this syntax. Alternatively, simply use the decorator as a wrapper function to achieve the same effect.

As a higher-order component

This decorator approach does not work with stateless functional React components. This approach will pass in the getClassName function as a prop to your component.

1import React from 'react';
2import ReactDOM from 'react-dom';
3import SuitCssify from 'react-suitcssify';
4
5const MyComponent = ({ getClassName }) => <div className={ getClassName() }></div>;
6
7const WrappedComponent = SuitCssify.higherOrder('optional_namespace')(MyComponent);
8
9ReactDOM.render(<WrappedComponent/>, document.body);

Here's an example with an ES2015 class React component.

1import React from 'react';
2import ReactDOM from 'react-dom';
3import SuitCssify from 'react-suitcssify';
4
5class MyComponent extends React.Component {
6  static propTypes = {
7    getClassName: React.PropTypes.func.isRequired
8  };
9
10  render() {
11    return <div className={ this.props.getClassName() }></div>
12  }
13}
14
15const WrappedComponent = SuitCssify.higherOrder('optional_namespace')(MyComponent);
16
17ReactDOM.render(<WrappedComponent/>, document.body);

As a mixin

1import React from 'react';
2import ReactDOM from 'react-dom';
3import SuitCssify from 'react-suitcssify';
4
5const MyComponent = React.createClass({
6  mixins: [SuitCssify.mixin],
7
8  render: function() {
9    return <div className={ this.getClassName() }></div>
10  }
11});
12
13ReactDOM.render(<MyComponent/>, document.body);

Calling getClassName directly

1import React from 'react';
2import ReactDOM from 'react-dom';
3import SuitCssify from 'react-suitcssify';
4
5const getClassName = SuitCssify.getClassName;
6
7class MyComponent extends React.Component {
8  render() {
9    return <div className={ getClassName({ componentName: 'MyComponent', namespace: 'my' }) }></div>
10  }
11}
12
13ReactDOM.render(<MyComponent/>, document.body);

A more performant implementation of a component using the getClassName function directly is to instead call getBaseComponentName which pre-calculates the baseComponentName one time given the componentName and namespace instead of calculating it on every call. While being slightly more verbose than the other options, it will provide better performance than all the other approaches. Here's what that looks like:

const displayName = 'MyComponent';
const namespace = 'my';
const baseComponentName = SuitCssify.getBaseComponentName(displayName, namespace);
const getClassName = SuitCssify.getClassName;

class MyComponent extends React.Component {
  render() {
    return <div className={ getClassName({ baseComponentName }) }></div>
  }
}

ReactDOM.render(<MyComponent/>, document.body);

Each of the above render as:

1<div class="MyComponent"></div>

Examples

Assuming we have the following component

1<Component />

We should expect the following output.

1getClassName() -----> 'Component'
2
3getClassName({ componentName: 'AwesomeComponent' }) -----> 'AwesomeComponent'
4
5getClassName({ namespace: 'my' }) -----> 'my-Component'
6
7getClassName({ modifiers: 'foo bar' }) -----> 'Component Component--foo Component--bar'
8
9getClassName({ states: 'active' }) -----> 'Component is-active'
10
11getClassName({ utilities: 'floatRight' }) -----> 'Component u-floatRight'
12
13getClassName({ className: 'arbitrary' }) -----> 'Component arbitrary'
14
15getClassName({ descendantName: 'title' }) -----> 'Component Component-title'
16
17getClassName({
18  className: 'arbitrary',
19  componentName: 'AwesomeComponent',
20  modifiers: 'foo bar',
21  namespace: 'my',
22  states: 'active',
23  utilities: 'floatRight'
24}) -----> 'my-AwesomeComponent my-AwesomeComponent--foo my-AwesomeComponent--bar is-active u-floatRight arbitrary'
25
26getClassName({
27  componentName: 'AwesomeComponent',
28  namespace: 'my',
29  modifiers: 'foo bar',
30  states: 'active',
31  utilities: 'floatRight',
32  className: 'arbitrary',
33  descendantName: 'child'
34}) -----> 'my-AwesomeComponent-child my-AwesomeComponent-child--foo my-AwesomeComponent-child--bar is-active u-floatRight arbitrary'
35
36const baseComponentName = getBaseComponentName('Component', 'my');
37getClassName({
38  baseComponentName
39}) -----> 'my-Component'

For more examples, browse the demo files or just run the demo.

Demo

npm run demo

Build

npm run build

Tests

npm test

Contributing

In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code.

Release History

• 3.2.0 - Add getBaseComponentName to API. Alias utility as getClassName -- utility will be removed in a future release as it would be a breaking change.
• 3.1.0 - Add higher-order component option. Update React version and add to peerDependencies. Other minor tweaks.
• 3.0.2 - Update decorator to not use inheritance. Update dev dependencies, including react 0.14.
• 3.0.1 - Use destructuring assignment instead of Object.assign. Utilize internal format method to de-dupe similar code. Adjust imports.
• 3.0.0 - Descendant elements no longer automatically inherit parent className.
• 2.0.2 - Add extra this.props check when using as utility.
• 2.0.1 - Remove React as peer dependency.
• 2.0.0 - Extend capabilities for use as decorator, mixin, or utility method. Project renamed to react-suitcssify. To upgrade, simply change the import/require to use the desired type (decorator, mixin, or utility) as shown in the usage section above.
• 1.0.1 - Update dependencies. Fix test mock. Update readme.
• 1.0.0 - Camelize and capitalize componentName
• 0.0.5 - Use Object.assign polyfill from react/lib. Update .npmignore and readme.
• 0.0.4 - Initial release