react-classed
v1.1.0
Published
Create React components with CSS classes
Downloads
17
Maintainers
Readme
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.
import React from 'react';
import { render } from 'react-dom';
import classed from 'react-classed';
const Text = classed.p`text-blue-500`;
const Link = classed.a([
'text-green-500',
({ href }) => ({
'bg-red-500': href && href.startsWith('http')
})
]);
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>
)
render(<App />, document.getElementById('root'));
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 = props => <button {...props}>{props.children}</button>;
const BlackButton = classed(Button)('bg-black');
Dynamic classnames
You can pass an object or a function that takes a object of props:
// object
const href = true;
const Link = classed.a({
'bg-red-500': href
});
// function
const Link = classed.a(({ href }) => ({
'bg-red-500': href && href.startsWith('http')
}));
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.a(({ href }) => ['link', { 'bg-red-500': href && href.startsWith('http') }]);
Array of classNames
You can pass an array of classnames and allow any type of other input:
const Link = classed.a([
'text-green-500',
({ href }) => ({
'bg-red-500': href && href.startsWith('http')
})
]);
Template string
You can also use tagged template strings:
const Text = classed.p`text-blue-500`;
And with variables:
const hasError = true;
const Error = classed.p`${hasError && 'error'}`;
And with functions to access props
const Link = classed.a`
text-green-500
${({ href }) => ({
'bg-red-500': href && href.startsWith('http')
})}
`
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 string
const Text = classed.p(`text-blue-500`, `font-weight: bold`);
// styled-components
import { css } from 'styled-components';
// css() => ['font-weight: bold']
const Text = classed.p(`text-blue-500`, css(`font-weight: bold`));
// emotion
import { css } from '@emotion/core';
// css() => { styles: 'font-weight: bold' }
const Text = classed.p(`text-blue-500`, css(`font-weight: bold`));
License
MIT © Fredrik Forsmo