# emotion-styled-utils

> Utilities for working with emotion and styled components.

Latest version **2.3.2** (published 2020-11-09) · MIT license · 0 weekly downloads

## Install

```sh
npm install emotion-styled-utils
pnpm add emotion-styled-utils
yarn add emotion-styled-utils
bun add emotion-styled-utils
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.2 |
| Published | 2020-11-09 |
| First published | 2020-04-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 16.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ramesh Nair |
| Maintainers | hiddentao |
| Keywords | styling, emotion |

## Links

- npm: https://www.npmjs.com/package/emotion-styled-utils
- Repository: https://github.com/hiddentao/emotion-styled-utils
- Homepage: https://solui.dev
- Issues: https://github.com/hiddentao/emotion-styled-utils/issues
- npm.io page: https://npm.io/package/emotion-styled-utils

## Dependencies (2)

- [color](https://npm.io/package/color.md) ^3.1.2
- [fontfaceobserver](https://npm.io/package/fontfaceobserver.md) ^2.1.0

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 2.3.2 (latest) — 2020-11-09
- 2.3.1 — 2020-08-02
- 2.3.0 — 2020-08-02
- 2.2.3 — 2020-06-22
- 2.2.2 — 2020-06-22
- 2.2.1 — 2020-06-22
- 2.2.0 — 2020-06-22
- 2.1.0 — 2020-06-16
- 2.0.1 — 2020-05-22
- 2.0.0 — 2020-05-20
- 1.5.0 — 2020-05-20
- 1.4.1 — 2020-05-20
- 1.4.0 — 2020-05-20
- 1.3.0 — 2020-05-20
- 1.2.0 — 2020-04-24
- … 4 more at https://npm.io/package/emotion-styled-utils/versions

## README

# emotion-styled-utils

[![NPM module](https://badge.fury.io/js/emotion-styled-utils.svg)](https://badge.fury.io/js/emotion-styled-utils)

Styling utilities for use with [emotion](https://emotion.sh/).

* Theme management utils, for use with [emotion-theming](https://emotion.sh/docs/theming).
* Layout utilities, including responsive breakpoints.
* Font loading and management.
* Styling fragments for use within [styled components](https://emotion.sh/docs/styled).

## Installation

```shell
npm install emotion-styled-utils @emotion/core
```

It is recommended that you also install the following packages:

```shell
npm install @emotion/styled emotion-theming
```

## Usage

**Using reset styles, themes and font-loading:**

```js
const React = require('react')
const styled = require('@emotion/styled')
const { Global, css } = require('@emotion/core')
const { ThemeProvider } = require('emotion-theming')
const { loadFonts, Themes, resetStyles } = require('emotion-styled-utils')

// setup themes manager
const themes = new Themes({
  bodyTextColor: '#000'
})

const CustomDiv = styled.div`
  ${({ theme }) => theme.font('body')};
  color: ${({ theme  }) => theme.bodyTextColor};
`

export default class MyApp extends React.Component {
  componentDidMount () {
    if (typeof window !== 'undefined' && !!window.document) {
      loadFonts({
        body: {
          name: 'Roboto',
          weights: {
            thin: 100,
            regular: 400,
            bold: 700,
          },
        },
      }, window.document).then(
        () => this.forceUpdate(),
        err => console.error(err)
      )
    }
  }

  render () {
    return (
      <ThemProvider theme={themes.get('default')}>
        <Global styles={css(resetStyles)} />
        <CustomDiv>hello world!</CustomDiv>
      </ThemeProvider>
    )
  }
}
```

**Using style fragments:**

```js
const React = require('react')
const styled = require('@emotion/styled')
import { ThemeProvider } from 'emotion-theming'
const { flex, smoothTransitions } = require('emotion-styled-utils')

const CustomDiv = styled.div`
  ${flex({ direction: 'column' })};
  ${smoothTransitions()};
`

export default class MyApp extends React.Component {
  render () {
    return (
      <CustomDiv>hello world!</CustomDiv>
    )
  }
}
```

See `fragments.js` for full list of available style fragments.

**Using media queries:**

```js
const React = require('react')
const styled = require('@emotion/styled')
import { ThemeProvider } from 'emotion-theming'
const { Themes } = require('emotion-styled-utils')

// setup themes manager with breakpoints
const themes = new Themes({}, {
  width: {
    mobile: '950px',
    desktop: '1280px',
  },
  height: {
    tall: '800px',
  }
})

const HideOnMobileDiv = styled.div`
  display: none;

  ${({ theme }) => theme.media.when({ minW: 'mobile' })} {
    display: block;
  }
`

const HideOnDesktopDiv = styled.div`
  display: block;

  ${({ theme }) => theme.media.when({ maxW: 'mobile' })} {
    display: none;
  }
`

export default class MyApp extends React.Component {
  render () {
    return (
      <HideOnMobileDiv>hello desktop user!</HideOnMobileDiv>
      <HideOnDesktopDiv>hello mobile user!</HideOnDesktopDiv>
    )
  }
}
```


## License

[MIT](LICENSE.md)

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