Useful interpolated functions for styled-components 💅
$ npm install --save styled-tools
Play with it on WebpackBin
import styled from 'styled-components'
import { prop, ifProp } from 'styled-tools'
const Button = styled.button`
color: ${prop('color', 'red')};
font-size: ${ifProp({ size: 'large' }, '20px', '14px')};
`
// renders with color: blue
<Button color="blue" />
// renders with color: red
<Button />
// renders with font-size: 20px
<Button size="large" />A more complex example:
const Button = styled.button`
color: ${prop('theme.colors.white', '#fff')};
font-size: ${ifProp({ size: 'large' }, prop('theme.sizes.lg', '20px'), prop('theme.sizes.md', '14px'))};
background-color: ${prop('theme.colors.black', '#000')};
${ifProp('disabled', css`
background-color: ${prop('theme.colors.gray', '#999')};
pointer-events: none;
`)}
`Returns the value of props[path] or defaultValue
Parameters
Examples
const Button = styled.button`
color: ${prop('color', 'red')};
`Returns any
Returns pass if prop is truthy. Otherwise returns fail
Parameters
Examples
// usage with styled-theme
import styled from 'styled-components'
import { ifProp } from 'styled-tools'
import { palette } from 'styled-theme'
const Button = styled.button`
background-color: ${ifProp('transparent', 'transparent', palette(0))};
color: ${ifProp(['transparent', 'accent'], palette('secondary', 0))};
font-size: ${ifProp({ size: 'large' }, '20px', ifProp({ size: 'medium' }, '16px', '12px'))};
`Returns any
- styled-theme - Extensible theming system for styled-components
MIT © Diego Haz