styled-tools 💅

Useful interpolated functions for styled-components 💅

Install

$ npm install --save styled-tools

Usage

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('tgeme.colors.black', '#000')};
  
  ${ifProp('disabled', css`
    background-color: ${prop('theme.colors.gray', '#999')};
    pointer-events: none;
  `)}
`

API

prop

Returns the value of props[path] or defaultValue

Parameters

• path (string | Array<string>)
• defaultValue any

Examples

const Button = styled.button`
 color: ${prop('color', 'red')};
`

Returns any

ifProp

Returns pass if prop is truthy. Otherwise returns fail

Parameters

• needle (string | Array<string> | Object)
• pass any
• fail any

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

Related

• styled-theme - Extensible theming system for styled-components

License

MIT © Diego Haz