https://github.com/margaretkrutikova/styled-system-mapper
Utility functions for style props in styled-system that allow using custom keys instead of arrays
https://github.com/margaretkrutikova/styled-system-mapper
css-in-js styled-system typescript
Last synced: 12 months ago
JSON representation
Utility functions for style props in styled-system that allow using custom keys instead of arrays
- Host: GitHub
- URL: https://github.com/margaretkrutikova/styled-system-mapper
- Owner: MargaretKrutikova
- License: mit
- Created: 2019-02-24T23:36:23.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-03-04T00:39:32.000Z (over 7 years ago)
- Last Synced: 2025-06-25T23:04:57.142Z (about 1 year ago)
- Topics: css-in-js, styled-system, typescript
- Language: TypeScript
- Homepage:
- Size: 405 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: code-of-conduct.md
Awesome Lists containing this project
README
# Styled system mapper
A library that allows using style functions from [styled-sytem](https://github.com/jxnblk/styled-system) with values that map to the keys of theme objects instead of array indices.
## Why?
In order to use style property `space` from `styled-system` with custom values, a `space` array should be added to theme. Then the array indices could be used as values for `space` properties on a component:
```
```
However, it can be difficult to get used to indices for values of spacing and challenging to remember the correct values that have to be applied on different breakpoints. Moreover, `theme` properties are quite often defined as key/values, e.g.:
```
const spacingUnit = 10
const space = {
xsmall: spacingUnit,
small: spacingUnit * 2,
medium: spacingUnit * 4,
large: spacingUnit * 6,
xlarge: spacingUnit * 8,
}
```
It might be more intuitive and convenient to define spacing values as an object with key/values and use the actual keys instead of indicies:
```
```
And that's what the library does. It exposes utility functions that try to map the values for `space` and `width` properties passed into the component to the custom keys defined in theme before they reach `styled-system`. If no mapping exists, the value is passed as is, which means that all kinds of values supported by `styled-system` can be used.
`Typescript` support includes autocompletion for the keys in the `space` object in theme.
### Usage
Currently supports `space` and `width` props that will be mapped to the keys of the `space` object. The examples below demonstrate usage with `Typescript` and [`emotion`](https://github.com/emotion-js/emotion).
First, create a typed version of `styled` with a theme that will have a `space` object and the types for `space` and `width` props that will be used as component's props:
```
import styled, { CreateStyled } from '@emotion/styled'
import { StyledSpaceProps, StyledWidthProps } from 'styled-system-mapper'
const spacingUnit = 10
const space = {
xsmall: spacingUnit,
small: spacingUnit * 2,
medium: spacingUnit * 4,
large: spacingUnit * 6,
xlarge: spacingUnit * 8,
}
const theme = {
space,
}
export type SpaceProps = StyledSpaceProps
export type WidthProps = StyledWidthProps
export default styled as CreateStyled
```
Pass the theme object into `ThemeProvider` of a CSS-in -JS library that has theming support:
```
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { theme } from '.\styled'
const App: React.FunctionComponent = () => (
<...>
)
```
Create a reusable component that will use the `space` and `width` props:
```
import { BgColorProps, bgColor } from 'styled-system'
import { space, width } from 'styled-system-mapper'
import styled, { SpaceProps, WidthProps } from './styled'
type Props = BgColorProps & SpaceProps & WidthProps
const Box = styled('div')(
{
boxSizing: 'border-box'
},
bgColor,
space,
width
)
export default Box
```
Any other style props from `styled-system` can combined together with `style` and `width` from `styled-system-mapper`.
Now the component is ready to be used:
```
Look at me!
```
## TODO
- mapper for color keys and font sizes,
- tests, tests, tests...