2.0.1 • Published 2 years ago
@jakeec/react-classy v2.0.1
react-classy
Simple library in the same vein as styled-components but for className
Installation
npm i react-classy
Usage
Basic usage
import classy from 'react-classy';
const MyDiv = classy.div`
flex-container
mb--sm
ta--center
bg--blue
`;
const MyHeader = classy.h1`
fw--bold
fs--lg
ts--black--sm
`;
const MySecondHeader = classy(MyHeader)`
fc--red
td--underline
`;
const MyComponent = () => {
return (
<MyDiv>
<MyHeader>Hello!</MyHeader>
<MySecondHeader>Hello!</MySecondHeader>
</MyDiv>
);
};
Conditional classes
import classy from 'react-classy';
const MyDiv = classy.div`
flex-container
mb--sm
ta--center
bg--blue
${props => (props.rounded ? 'br--md' : '')}
`;
const MySquaredDiv = () => {
/* this MyDiv component does not receive the 'rounded' prop (equivalent to doing rounded={false})
so the border-radius class br--md is not applied */
return <MyDiv />;
};
const MyRoundedDiv = () => {
/* this MyDiv component does receive the 'rounded' prop (shorthand for rounded={true})
so the border-radius class is applied */
return <MyDiv rounded />;
};