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 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.
; // using argumentsconst Header = 'font-sans' 'text-3xl'; // using an arrayconst Intro = 'font-serif' 'text-base' 'leading-relaxed'; // using a stringconst Wrapper = 'container mx-auto px-4'; // using an objectconst Button = 'color-gray-500': true 'font-serif': true; const MyComponent = <Wrapper> <Header>A title</Header> <Intro>A nice intro</Intro> <Button>Ok</Button> </Wrapper>; ;
more examples here
Based on props
Props are available by using a function as second param.
const Button = 'font-serif' 'color-red-500': propstype === ButtonTypeERROR 'color-gray-500': propstype === ButtonTypeDEFAULT ; const MyComponent = <Wrapper> <Button =>An alert button</Button> <Button =>A default button</Button> </Wrapper>; ;
Adding styling to existing classnames-component (not implemented yet)
const Text = 'font-sans'; // create a new classnames-component starting from Textconst Paragraph = 'text-base leading-relaxed';
Changing semantics (not implemented yet)
You can use as
to overwrite the semantics of the element.
const Text = 'font-sans'; const MyComponent = <Text = />; ;
License
MIT