Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/scf4/styled-map
✨A super simple way to map props to styles with Styled Components ⚠️ See README.md
https://github.com/scf4/styled-map
css emotionjs helper helpers react styled-components
Last synced: 3 months ago
JSON representation
✨A super simple way to map props to styles with Styled Components ⚠️ See README.md
- Host: GitHub
- URL: https://github.com/scf4/styled-map
- Owner: scf4
- License: mit
- Archived: true
- Created: 2017-04-26T15:03:13.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2022-02-03T13:48:34.000Z (almost 3 years ago)
- Last Synced: 2024-09-22T00:07:39.907Z (3 months ago)
- Topics: css, emotionjs, helper, helpers, react, styled-components
- Language: JavaScript
- Homepage:
- Size: 641 KB
- Stars: 593
- Watchers: 7
- Forks: 14
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-emotion - styled-map - Super simple lib to map props to styles (Libraries)
README
> ⚠️ As off 2022, I don't recomend using this as part of the foundation for a styling system for anything but small projects.
> While this package is simple and lightweight and solves a common problem in a familiar way, I suggest you try styled-system or Shopify's [Restyle](https://github.com/Shopify/restyle) (especially if you're using React Native) instead — or a component library inspired by (or built with) those tools.
>
> There's a little more work upfront but it makes building performant UIs with React a lot faster and more consistent.
> No more work will go into this package as of Febuary 2022. If you'd like an active fork to be linked here please contact me.
**A better way to map props to styles**
**Simple CSS-like syntax, for Styled Components and Emotion**
## Example
## Install
`yarn add styled-map`
or
`npm install styled-map --save`
## Why use Styled Map?
Styled Map simplifies your components' CSS, making your code cleaner and clearer wherever you use props to alter styles.
### Without Styled Map
With Styled Components alone, you'll often do something like this:
```js
const Button = styled.button`
color: ${props => props.primary ? '#0c0' : '#ccc'};
`;
```
but this quickly turns messy:
```js
const Button = styled.button`
color: ${props =>
props.primary && '#0c0' ||
props.warning && '#c00' ||
props.info && '#0cc' ||
'#ccc'
};
border: 2px solid ${props =>
props.primary && '#0c0' ||
props.warning && '#c00' ||
props.info && '#0cc' ||
'#ccc'
};
font-size: ${props =>
props.small && '8px' ||
props.medium && '18px' ||
props.large && '32px' ||
'16px'
};
`;
Submit
```
### With Styled Map
Here's the same component using `styled-map`:
```js
import styledMap from 'styled-map';
const buttonColor = styledMap`
primary: #0c0;
warning: #c00;
info: #0cc;
default: #ccc;
`;
const Button = styled.button`
color: ${buttonColor};
border: 2px solid ${buttonColor};
font-size: ${styledMap`
large: 32px;
small: 8px;
medium: 18px;
default: 16px;
`};
`;
Submit
```
Much better!
> Note: If there are no matching props, styled-map will look for a "default" item in your map. If it doesn't find one it will use the last item by default.
## Usage with themes
Styled Map makes mapping to themes incredibly easy with the `mapToTheme` function.
Simply set up your themes like this:
```js
const myTheme = {
buttonColor: {
primary: 'orange',
warning: 'red',
info: 'blue',
default: 'white',
},
...
};
```
and now you can do this:
```js
import styledMap, { mapToTheme as theme } from 'styled-map';
const Button = styled.button`
color: ${theme('buttonColor')};
border: 2px solid ${theme('buttonColor')};
`;
```
> Note: importing `as theme` is optional, but it reads a lot better!
### Nested theme objects
Nested objects can be refered to with dots, so you can write `theme('colors.button')` if your theme looks like this:
```js
const theme = {
colors: {
button: {
primary: '#b00',
info: '#0b0',
etc: '#00f',
}
}
}
```
## Optionally mapping to prop values
Sometimes you'll want to map styles to the *value* of a prop instead of using prop keys. This is especially useful if you have something like a `type` variable to pass to your component and you don't want to do something like ``.
You can use `styled-map` in these situations by simply passing a prop name as the first argument.
```js
const Button = styled.button`
background: ${styledMap('type', {
primary: '#c00',
default: '#ddd',
})};
`;
```
`styled-map` will then look at the Button's `type` prop for a matching value.
This also works in `mapToTheme`:
```js
import styledMap, { mapToTheme as theme } from 'styled-map';
const myTheme = {
buttonColor: {
primary: 'orange',
warning: 'red',
info: 'blue',
default: 'white',
},
...
};
const Button = styled.button`
color: ${theme('buttonColor', 'kind')};
`;
Click // will be red
```
**Note: This currently doesn't work with the pseudo-CSS syntax ([new in v3.0](https://github.com/scf4/styled-map/issues/7)). This functionality should arrive by v4.0. PRs welcome!**:
## Typings
StyledMap has TypeScript typings since version `3.2.0`.
## License
MIT Copyright 2017–2019