Useful interpolated functions for styled-components π
$ npm install --save styled-tools
Play with it on WebpackBin
import styled, { css } from 'styled-components'
import { prop, ifProp, switchProp } from 'styled-tools'
const Button = styled.button`
color: ${prop('color', 'red')};
font-size: ${ifProp({ size: 'large' }, '20px', '14px')};
background-color: ${switchProp('theme', {
dark: 'blue',
darker: 'mediumblue',
darkest: 'darkblue'
})};
`
// renders with color: blue
<Button color="blue" />
// renders with color: red
<Button />
// renders with font-size: 20px
<Button size="large" />
// renders with background-color: mediumblue
<Button theme="darker" />
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')};
${switchProp('kind', {
dark: css`
background-color: ${prop('theme.colors.blue', 'blue')};
border: 1px solid ${prop('theme.colors.blue', 'blue')};
`,
darker: css`
background-color: ${prop('theme.colors.mediumblue', 'mediumblue')};
border: 1px solid ${prop('theme.colors.mediumblue', 'mediumblue')};
`,
darkest: css`
background-color: ${prop('theme.colors.darkblue', 'darkblue')};
border: 1px solid ${prop('theme.colors.darkblue', 'darkblue')};
`,
})}
${ifProp('disabled', css`
background-color: ${prop('theme.colors.gray', '#999')};
border-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
Switches on a given prop. Returns the value or function for a given prop value.
Parameters
Examples
import styled, { css } from 'styled-components'
import { switchProp } from 'styled-tools'
const Button = styled.button`
font-size: ${switchProp('size', {
small: prop('theme.sizes.sm', '12px'),
large: prop('theme.sizes.lg', '20px'),
default: prop('theme.sizes.md', '16px'),
})};
${switchProp('theme.kind', {
light: css`
color: LightBlue;
`,
dark: css`
color: DarkBlue;
`,
})}
`
<Button size="large" theme={{ kind: 'light' }} />
Returns any
Calls a function passing properties values as arguments.
Parameters
Examples
// example with polished
import styled from 'styled-components'
import { darken } from 'polished'
import { call, prop } from 'styled-tools'
const Button = styled.button`
border-color: ${call(darken(0.5), prop('theme.primaryColor', 'blue'))};
`
Returns any
- styled-theme - Extensible theming system for styled-components
MIT Β© Diego Haz