styled-tools 💅

Useful interpolated functions for styled-components 💅

Install

$ npm install --save styled-tools

Usage

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;
  `)}
`

API

Table of Contents

• prop
• ifProp
• withProp
• switchProp
• Types
  • Needle

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

• test (Needle | 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

withProp

Calls a function passing properties values as arguments.

Parameters

• needle Needle
• fn Function

Examples

// example with polished
import styled from 'styled-components'
import { darken } from 'polished'
import { withProp, prop } from 'styled-tools'

const Button = styled.button`
  border-color: ${withProp(prop('theme.primaryColor', 'blue'), darken(0.5))};
  font-size: ${withProp('theme.size', size => `${size + 1}px`)};
`

Returns any

switchProp

Switches on a given prop. Returns the value or function for a given prop value. Otherwise returns defaultValue

Parameters

• needle Needle
• switches Object
• defaultValue any deprecated

Examples

import styled, { css } from 'styled-components'
import { switchProp, prop } from 'styled-tools'

const Button = styled.button`
 font-size: ${switchProp(prop('size', 'medium'), {
   small: prop('theme.sizes.sm', '12px'),
   medium: prop('theme.sizes.md', '16px'),
   large: prop('theme.sizes.lg', '20px'),
 }};
 ${switchProp('theme.kind', {
   light: css`
     color: LightBlue;
   `,
   dark: css`
     color: DarkBlue;
   `,
 })}
`

<Button size="large" theme={{ kind: 'light' }} />

Returns any

Types

Needle

Type: (string | Array<string> | Function)

Related

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

License

MIT © Diego Haz