Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hiddentao/emotion-styled-utils
Utilities for working with emotion and styled components.
https://github.com/hiddentao/emotion-styled-utils
Last synced: 8 days ago
JSON representation
Utilities for working with emotion and styled components.
- Host: GitHub
- URL: https://github.com/hiddentao/emotion-styled-utils
- Owner: hiddentao
- License: mit
- Created: 2020-04-05T11:34:05.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T02:47:22.000Z (almost 2 years ago)
- Last Synced: 2024-08-08T19:57:08.256Z (3 months ago)
- Language: JavaScript
- Size: 640 KB
- Stars: 0
- Watchers: 3
- Forks: 0
- Open Issues: 8
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
README
# emotion-styled-utils
[](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 (
hello world!
)
}
}
```
**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 (
hello world!
)
}
}
```
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 (
hello desktop user!
hello mobile user!
)
}
}
```
## License
[MIT](LICENSE.md)