classnames-components – A classnames component wrapper to speed up styling React components

Geoffrey has created a handy package to quickly create React components that are built of an element with some CSS classes applied to them. Handy for when you’re working with CSS libraries such as Tailwind.

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;

The classnames-components package itself utilizes the handy classnames package under the hood. Currently limited to HTML elements, but one of the upcoming features is to allow you to extend existing classnames-component-created components.

Installation per NPM/Yarn:

# NPM
npm i classnames-components

# Yarn
yarn add classnames-components

classnames-components (GitHub) →