README

react-html-classes

Combine html classes for React.

Installation

npm i react-html-classes
# or
yarn add react-html-classes

Using

You may use react-html-classes as a decorator of react component.

import React, {Component} from 'react'
import style, {StyleProps} from 'react-html-classes'

// default class names
const styles = {
  root: 'root'
}

@style(styles)
class Root extends Component <StyleProps<typeof styles>> {
  render () {
    return styles.root
  }
}

export default Root

Also, you can use it without decorators

import React, {Component} from 'react'
import style, {StyleProps} from 'react-html-classes'

// default class names
const styles = {
  root: 'root'
}

class Root extends Component <StyleProps<typeof styles>> {
  render () {
    return styles.root
  }
}

export default style(styles)(Root)

You can override a function component

import React, {FunctionComponent} from 'react'
import style, {StyleProps} from 'react-html-classes'

// default class names
const styles = {
  root: 'root'
}

const Root: FunctionComponent<StyleProps<typeof styles>> = () => {
  return styles.root
}

export default style(styles)(Root)

Features

You can override default class names by component props className and classNames.

const Test = () => <Root className='test' />
// returns `root test`

const Test = () => <Root classNames={{root: 'test'}} />
// the same `root test`

All features from html-classes are available to use.

import React, {Component} from 'react'
import style, {StyleProps} from 'react-html-classes'

// default class names
const styles = {
  root: () => 'root', // returns 'root'
  test: ['test1', 'test2'] // returns 'test1 test2'
}

@style(styles)
class Root extends Component <StyleProps<typeof styles>> {
  render () {
    return <>{styles.root} | {styles.test}</>
  }
}

export default Root

With props

const Test = () => <Root className={{test: true}} />
// returns `root test | test1 test2`

const Test = () => <Root className='test' classNames={{
  root: 'root-test',
  test: ['test3']
}} />
// returns `root test root-test | test1 test2 test3`

Create React App

You can use it with sass modules in CRA.

import React, {Component} from 'react'
import style, {StyleProps} from 'react-html-classes'
import styles from './Root.module.scss'

@style(styles)
class Root extends Component <StyleProps> {
  render () {
    return styles.root
  }
}

export default Root

Issues

If you find a bug, please file an issue on GitHub

Usage no npm install needed!