# styled-props
> Small helper to style your components with style.
Latest version **1.1.2** (published 2018-01-23) · MIT license · 0 weekly downloads
## Install
```sh
npm install styled-props
pnpm add styled-props
yarn add styled-props
bun add styled-props
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.1.2 |
| Published | 2018-01-23 |
| First published | 2017-01-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 240 |
| Author | Rafał Filipek |
| Maintainers | rafal.filipek |
| Keywords | css, css-in-js |
## Links
- npm: https://www.npmjs.com/package/styled-props
- Repository: https://github.com/RafalFilipek/styled-props
- Homepage: https://github.com/RafalFilipek/styled-props#readme
- Issues: https://github.com/RafalFilipek/styled-props/issues
- npm.io page: https://npm.io/package/styled-props
## 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
- 1.1.2 (latest) — 2018-01-23
- 1.1.1 — 2017-09-14
- 1.1.0 — 2017-08-22
- 1.0.0 — 2017-06-07
- 0.2.0 — 2017-04-11
- 0.1.3 — 2017-04-11
- 0.1.2 — 2017-03-02
- 0.1.1 — 2017-01-24
- 0.1.0 — 2017-01-13
- 0.0.3 — 2017-01-11
- 0.0.1 — 2017-01-10
## README
---
[](https://badge.fury.io/js/styled-props)
[](https://greenkeeper.io/)
[](https://travis-ci.org/RafalFilipek/styled-props)
[](https://codecov.io/gh/RafalFilipek/styled-props)
[](https://github.com/prettier/prettier)
Simple lib that allows you to set *styled props* in your [*styled-components*](https://styled-components.com) without stress. Let's take `Button` component from styled-components web page. Here it is:
```jsx
const Button = styled.button`
font-size: 1em;
margin: 1em;
padding: 0.25 em 1em;
border: 2px solid palevioletred;
border radius: 3px;
background: ${props => props.primary && 'palevioletred'}
color: ${props => props.primary ? 'white' : 'palevioletred'}
`;
```
Now you can simply write
```jsx
or
```
But your application is probably much bigger than single button. And you want to keep your colors, sizes etc. in one place. So let's create simple `styles.js` file.
```js
// styles.js
export const background = {
primary: '#F5F5F5',
danger: '#DD2C00',
success: '#7CB342',
info: '#BBDEFB',
};
export const color = {
primary: '#263238',
default: '#FAFAFA',
};
export const size = {
padding: {
small: 10,
medium: 20,
big: 30,
},
borderRadius: {
small: 5,
default: 10,
},
};
```
> `styles.js` file is cool because you can access them anywhere! You can also generate some style guides and of course keep all information in one place.
> **IMPORTANT** It is better to use singular forms for keys. In `bind` mode keys are used to set fallbacks so `color` is better than `colors` as a prop.
So how can I help? `styled-props` package exports single function called `styledProps`. You can use it in all your components.
### TL;DR; Examples
- [Basic usage](https://codesandbox.io/s/n5X21gBYR)
- [Default props](https://codesandbox.io/s/2k6VL6wgz)
- [Bind](https://codesandbox.io/s/gJxQvB1Bk)
### Installation
```
yarn add styled-props
// or
npm install styled-props
```
### Basic usage
```jsx
import styledProps from 'styled-props';
import styled from 'styled-components';
import {
background,
color,
size,
} from './styles.js';
const Button = styled.button`
background: ${styledProps(background)};
color: ${styledProps(color)};
padding: ${styledProps(size.padding)}px;
border-radius: ${styledProps(size.borderRadius)}px;
font-size: 1em;
margin: 1em;
border: 2px solid palevioletred;
`;
export default () => (
)
```
As you can see each prop can be mapped into specific value for selected css rule. If you need another combination, you just add it in `styles.js`.
### Default values
Everything is based on props. As we know in React you can set `defaultProps` for each component. You can also use them to set default values for styles. For example:
```jsx
const Button = styled.button`
color: ${styledProps(color, 'color')}
`;
Button.defaultProps = {
color: 'default',
};
```
If you will not provide `primary` or `default` property for Button component `styledProps` function will check value of `color` property and use it as a key in `color` map. In our case default color is `color.white`. This is quite cool because you can also set styles the old way:
```jsx
```
### Bind
When your component is full of dynamic styles you can ( from `v0.1.0`) use `bind` options to simplify things.
```js
//styles.js
export default {
color: {
red: '#990000',
white: '#ffffff',
black: '#000000',
},
size: {
small: 10,
medium: 20,
big: 30,
}
}
```
```jsx
import styles from './styles';
import { bindStyles } from 'styled-props';
// or alternatively
// import { bind } from 'styled-props';
s = bindStyles(styles);
export default styled.button`
color: ${s.color};
padding: ${s.size};
`;
```
> As you can see `bind` is available as `bind` or `bindStyles` in case you're using lodash or any other library to for e.g bind functions context.
Each key in `s` provides `styledProps` function. Also default value is set automaticly with `key` from map.
```
s.color === styledProps(styles.color, 'color');
```
### API
```
styledProps(stylesMap:Object, [fallbackKey]:string)
styledPropsBind(collectionsMap:Object)
```
---
_Source: https://npm.io/package/styled-props · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._