classnames-components

classnames-components

A CSS class component wrapper to speed up styling React components

Heavily inspired by the great css-in-js library styled-components, all credits where credits due. This module is a component wrapper around classnames.

This project is README-driven, this file is step 1. There will be a lot of edits before I start coding things.

Installation

not on npm yet

Basic usage

Because we're using classnames, you have a lot of flexibility.

import cc from 'classnames-components';

// using arguments
const Header = cc('h1')('font-sans', 'text-3xl');

// using an array
const Intro = cc('p')(['font-serif', 'text-base', 'leading-relaxed']);

// using a string
const Wrapper = cc('section')('container mx-auto px-4');

// using an object
const Button = cc('button')({
  'color-gray-500': true,
  'font-serif': true,
});

const MyComponent = () => (
  <Wrapper>
    <Header>A title</Header>
    <Intro>A nice intro</Intro>
    <Button>Ok</Button>
  </Wrapper>
)

export default MyComponent;

more examples here

Based on props

Props are available by using a function as second param.

const Button = cc('button')(props => [
  'font-serif',
  {
    'color-red-500': props.type === ButtonType.ERROR,
    'color-gray-500': props.type === ButtonType.DEFAULT,
  }
]);

const MyComponent = () => (
  <Wrapper>
    <Button type={ButtonType.ALERT}>An alert button</Button>
    <Button type={ButtonType.DEFAULT}>A default button</Button>
  </Wrapper>
)

export default MyComponent;

Adding styling to existing classnames-component

const Text = cc('p')('font-sans');

// create a new classnames-component starting from Text
const Paragraph = cc(Text)('text-base leading-relaxed')

Changing semantics

You can use as to overwrite the semantics of the element.

const Text = cc('p')('font-sans');

const MyComponent = props => (
  <Text {...props} as={'div'}/>
)

export default MyComponent;

License

MIT