react-classed
Create React components with CSS classes. Perfect when using a CSS framework, e.g Tailwind.
Installation
npm install --save react-classed
Usage
Create React components with CSS classes, inspired by styled-components and other styled packages.
;;; const Text = classedp`text-blue-500`; const Link = classed; const App = <div> <Text>Blue text</Text> <Link>A green link</Link> <Link href="https://github.com">A green link with red background</Link> </div> ;
Just like a styled package you can create any html tag by using classed.X
, classed[x]
and classed(x)
.
You can also use a existing component that accepts className
prop:
const Button = <button ...props>propschildren</button>;const BlackButton = 'bg-black';
Dynamic classnames
You can pass an object or a function that takes a object of props:
// objectconst href = true;const Link = classed; // functionconst Link = classed; const App = <div> <Link>A green link</Link> <Link href="https://github.com">A green link with red background</Link> </div>
Functions can return a array of classNames:
const Link = classed;
Array of classNames
You can pass an array of classnames and allow any type of other input:
const Link = classed;
Template string
You can also use tagged template strings:
const Text = classedp`text-blue-500`;
And with variables:
const hasError = true;const Error = classedp``;
And with functions to access props
const Link = classeda` text-green-500 `
You can return array, objects with true/false values and strings.
classnames package
You also support all input types of classnames.
Additional CSS
You can also add additional css and styled-components and emotion css
functions or any input that are a object with styles
string property or array of strings.
// template stringconst Text = classed; // styled-components; // css() => ['font-weight: bold']const Text = classed; // emotion; // css() => { styles: 'font-weight: bold' }const Text = classed;
License
MIT © Fredrik Forsmo