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.
yarn add classnames-componentsor
npm i classnames-componentsYou 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
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;const Text = cc('p')('font-sans');
// create a new classnames-component starting from Text
const Paragraph = cc(Text)('text-base leading-relaxed');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;MIT