# hbs-classes

> ``` npm i hbs-classes ```

Latest version **0.0.4** (published 2020-03-03) · MIT license · 0 weekly downloads

## Install

```sh
npm install hbs-classes
pnpm add hbs-classes
yarn add hbs-classes
bun add hbs-classes
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.4 |
| Published | 2020-03-03 |
| First published | 2020-03-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 10.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | khanhpv0305 |
| Maintainers | khanhpham0305 |

## Links

- npm: https://www.npmjs.com/package/hbs-classes
- Repository: https://github.com/khanhpv0305/hbs-classes
- Homepage: https://github.com/khanhpv0305/hbs-classes#readme
- Issues: https://github.com/khanhpv0305/hbs-classes/issues
- npm.io page: https://npm.io/package/hbs-classes

## Dependencies (5)

- [react](https://npm.io/package/react.md) ^16.13.0
- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.15
- [react-dom](https://npm.io/package/react-dom.md) ^16.13.0
- [@emotion/core](https://npm.io/package/@emotion/core.md) ^10.0.28
- [@emotion/stylis](https://npm.io/package/@emotion/stylis.md) ^0.8.5

## Recent versions

- 0.0.4 (latest) — 2020-03-03
- 0.0.3 — 2020-03-02
- 0.0.2 — 2020-03-02
- 0.0.1 — 2020-03-02
- 1.0.0 — 2020-03-02

## README

# Install Enhanced Emotion

```
npm i hbs-classes
```

# APIs
- [css](#css)
- [useStyles](#usestyles)
- [ThemeProvider](#themeprovider)

## css
Define styles

```
import {css} from 'hbs-classes'

const styles = {}

styles.root = css`
  background: rgba(0, 0, 0, 0.15);
`

export default styles
```

Styles based on props
```
styles.name = css`
  color: green;

  ${(props) => props.active && `
    color: red;
  `}
`

styles.phone = css`
  color: ${(props) => props.color};
`
```

Shorthand
```
import {is, by} from 'hbs-classes/utils'

styles.name = css`
  color: green;

  ${is('active')`
    color: red;
  `}
`

styles.phone = css`
  color: ${by('color')};
`
```

Support nested syntax
```
styles.phone = css`
  &::before {
    content: '+84 ';
  }
`

styles.firstName = css``

styles.lastName = css``

styles.name = css`
  &:hover {
    ${styles.lastName}, ${styles.firstName} {
      font-weight: bold;
    }
  }
`
```

## useStyles
A custom hook to get classNames from style file

```
import {useStyles} from 'hbs-classes'
import styles from './styles'

const App = () => {
  const classes = useStyles(styles)
  
  return (
    <div className={classes('root')}>
      <div className={classes('name')}>Khanh Pham</div>

      <div className={classes('address')}>593 Xo Viet Nghe Tinh</div>

      <div className={classes('phone', {color: 'red'})}>0347719454</div>
    </div>
  )
}
```

## ThemeProvider
Global theme

```
import {ThemProvider} from 'hbs-classes'

const App = () => {
  return (
    <ThemeProvider theme={{
      colors: {
        green: 'green',
        yellow: 'yellow',
      },
    }}>
      /* content */
    </ThemeProvider>
  )
}

export default App
```

styles file
```
import {css} from 'hbs-classes'
import {by} from 'hbs-classes/utils'

const styles = {}

styles.root = css`
  background: ${by('bgColor')};
`

styles.name = css`
  color: red;
  font-size: 3rem;
`

styles.address = css`
  color: ${by('theme.colors.yellow')};
`

export default styles
```

---
_Source: https://npm.io/package/hbs-classes · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._