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 = styledbutton` font-size: 1em; margin: 1em; padding: 0.25 em 1em; border: 2px solid palevioletred; border radius: 3px; background: color: `;
Now you can simply write
<Button>Hello</Button> or <Button >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 const background = primary: '#F5F5F5' danger: '#DD2C00' success: '#7CB342' info: '#BBDEFB'; const color = primary: '#263238' default: '#FAFAFA'; 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 socolor
is better thancolors
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
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 = styledbutton` background: ; color: ; padding: px; border-radius: px; font-size: 1em; margin: 1em; border: 2px solid palevioletred;`; <div> <Button >This</Button> <Button >is</Button> <Button >so</Button> <Button >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 = styledbutton` color: `;ButtondefaultProps = 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 ="primary" ="big" />
Bind
When your component is full of dynamic styles you can ( from v0.1.0
) use bind
options to simplify things.
//styles.js 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 = ; button` color: ; padding: ;`;
As you can see
bind
is available asbind
orbindStyles
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)