https://github.com/frozzare/react-classed
Create React components with CSS classes
https://github.com/frozzare/react-classed
classnames css react styled
Last synced: about 2 months ago
JSON representation
Create React components with CSS classes
- Host: GitHub
- URL: https://github.com/frozzare/react-classed
- Owner: frozzare
- License: mit
- Created: 2020-01-15T11:40:06.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T20:36:30.000Z (almost 3 years ago)
- Last Synced: 2025-02-27T01:18:44.033Z (over 1 year ago)
- Topics: classnames, css, react, styled
- Language: JavaScript
- Size: 1020 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: license
Awesome Lists containing this project
README
# react-classed
[](https://github.com/frozzare/react-classed/actions)
Create React components with CSS classes. Perfect when using a CSS framework, e.g [Tailwind](https://tailwindcss.com/).
## Installation
```
npm install --save react-classed
```
## Usage
Create React components with CSS classes, inspired by [styled-components](https://styled-components.com/) and other styled packages.
```js
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 = () => (
Blue text
A green link
A green link with red background
)
render(, 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:
```js
const Button = props => {props.children};
const BlackButton = classed(Button)('bg-black');
```
### Dynamic classnames
You can pass an object or a function that takes a object of props:
```js
// 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 = () => (
A green link
A green link with red background
)
```
Functions can return a array of classNames:
```js
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:
```js
const Link = classed.a([
'text-green-500',
({ href }) => ({
'bg-red-500': href && href.startsWith('http')
})
]);
```
### Template string
You can also use tagged template strings:
```js
const Text = classed.p`text-blue-500`;
```
And with variables:
```js
const hasError = true;
const Error = classed.p`${hasError && 'error'}`;
```
And with functions to access `props`
```js
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](https://jedwatson.github.io/classnames/).
### Additional CSS
You can also add additional css and [styled-components](https://styled-components.com/) and [emotion](https://emotion.sh/) `css` functions or any input that are a object with `styles` string property or array of strings.
```js
// 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](https://github.com/frozzare)