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