Simple lib that allows you to set styled props in your styled-components without stress. Let's take Button component from styled-components web page. Here it is:
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
<Button>Hello</Button> or <Button primary>World!</Button>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.
// 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.jsfile 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
bindmode keys are used to set fallbacks socoloris better thancolorsas 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
Installation
yarn add styled-props
// or
npm install styled-props
Basic usage
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 () => (
<div>
<Button primary small>This</Button>
<Button info medium>is</Button>
<Button danger big>so</Button>
<Button success medium>cool!</Button>
</div>
)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:
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:
<Button color="primary" size="big" />Bind
When your component is full of dynamic styles you can ( from v0.1.0) use bind options to simplify things.
//styles.js
export default {
color: {
red: '#990000',
white: '#ffffff',
black: '#000000',
},
size: {
small: 10,
medium: 20,
big: 30,
}
}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
bindis available asbindorbindStylesin 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)