https://github.com/d8corp/react-html-classes
https://github.com/d8corp/react-html-classes
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/d8corp/react-html-classes
- Owner: d8corp
- License: mit
- Created: 2020-04-19T10:01:34.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-09T02:20:33.000Z (over 3 years ago)
- Last Synced: 2025-08-09T14:30:11.649Z (11 months ago)
- Language: JavaScript
- Size: 445 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-html-classes
[](https://www.npmjs.com/package/react-html-classes)
[](https://www.npmjs.com/package/react-html-classes)
[](https://github.com/d8corp/react-html-classes/blob/master/LICENSE)
Combine html classes for React with pleasure.
## Install
```bash
npm i react-html-classes
# or
yarn add react-html-classes
```
## Usage
It was born to simplify the work with SCSS modules.
Use [CRA](https://create-react-app.dev) to start a project.
Create a SCSS module file
`App.module.scss`
```scss
.root {
display: flex;
flex-direction: column;
height: 100vh;
}
.header {
height: 100px;
background: #aaa;
}
.footer {
background: #333;
color: #aaa;
}
.content {
flex: 1;
}
```
Import the file into
`App.jsx`
```typescript jsx
import { FC } from 'react'
import style, { MultipleStyleProps } from 'react-html-classes'
// import our styles
import styles from './App.module.scss'
// create style generator
export const getStyles = style(styles)
export interface AppProps extends MultipleStyleProps> {
// add your props here
}
export const App: FC = ({
className,
classNames,
}) => {
// generate html classes list
const styles = getStyles(className, classNames)
return (
This is a header
Hello World!
FOOTER
)
}
```
## Features
You can provide any styles to the `App` component through props
`index.ts`
```typescript jsx
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import { App } from './App'
const container = document.getElementById('root') as HTMLDivElement
const root = createRoot(container)
root.render(
)
```
You can use any feature available with [html-classes](https://www.npmjs.com/package/html-classes)
on `className` and `classNames`
```typescript jsx
root.render(
'test'}
classNames={{
root: { test1_1: true, test1_2: () => false },
header: ['test2_1', ['test2_2', 'test2_3']],
content: () => () => ['test3_1', () => 'test3_2'],
footer: new Set(['test4']),
}}
/>
)
```
## Issues
If you find a bug, please file an issue on [GitHub](https://github.com/d8corp/react-html-classes/issues)
[](https://github.com/d8corp/react-html-classes/issues)
[](https://github.com/d8corp/react-html-classes)
[](https://github.com/d8corp/react-html-classes)