Skip to content
A clasnames component wrapper to speed up styling React components
JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src
.babelrc
.gitignore
.prettierrc
LICENSE.MD
README.md
package.json
yarn.lock

README.md

classnames-components npm version

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 and WIP. The basic functionality works.

Installation

yarn add classnames-components

or

npm i classnames-components

Basic usage

You can play around with a CodeSandbox example here.

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 (not implemented yet)

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

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

Changing semantics (not implemented yet)

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

You can’t perform that action at this time.