Awesome Open Source
Awesome Open Source

styled-tools 💅

NPM version NPM downloads Dependencies Build Status Coverage Status

Useful interpolated functions for styled-components 💅, emotion 👩‍🎤, JSS and other CSS-in-JS libraries.

Install

npm:

npm i styled-tools

Yarn:

yarn add styled-tools

Usage

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

Returns the value of props[path] or defaultValue

Parameters

  • path string
  • defaultValue any

Examples

import styled from "styled-components";
import { prop } from "styled-tools";

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

Returns PropsFn

theme

Same as prop, except that it returns props.theme[path] instead of props[path].

Parameters

  • path string
  • defaultValue any

Examples

import styled from "styled-components";
import { theme } from "styled-tools";

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

palette

Returns props.theme.palette[key || props.palette][tone || props.tone || 0] or defaultValue.

Parameters

  • keyOrTone (string | number)
  • toneOrDefaultValue any
  • defaultValue any

Examples

import styled, { ThemeProvider } from "styled-components";
import { palette } from "styled-tools";

const theme = {
  palette: {
    primary: ['#1976d2', '#2196f3', '#71bcf7', '#c2e2fb'],
    secondary: ['#c2185b', '#e91e63', '#f06292', '#f8bbd0']
  }
};

const Button = styled.button`
  color: ${palette(1)};                    // props.theme.palette[props.palette][1]
  color: ${palette("primary", 1)};         // props.theme.palette.primary[1]
  color: ${palette("primary")};            // props.theme.palette.primary[props.tone || 0]
  color: ${palette("primary", -1)};        // props.theme.palette.primary[3]
  color: ${palette("primary", 10)};        // props.theme.palette.primary[3]
  color: ${palette("primary", -10)};       // props.theme.palette.primary[0]
  color: ${palette("primary", 0, "red")};  // props.theme.palette.primary[0] || red
`;

<ThemeProvider theme={theme}>
  <Button palette="secondary" />
</ThemeProvider>

ifProp

Returns pass if prop is truthy. Otherwise returns fail

Parameters

Examples

import styled from "styled-components";
import { ifProp, palette } from "styled-tools";

const Button = styled.button`
  background-color: ${ifProp("transparent", "transparent", palette(0))};
  color: ${ifProp(["transparent", "accent"], palette("secondary"))};
  font-size: ${ifProp({ size: "large" }, "20px", ifProp({ size: "medium" }, "16px", "12px"))};
`;

Returns PropsFn

ifNotProp

Returns pass if prop is falsy. Otherwise returns fail

Parameters

Examples

import styled from "styled-components";
import { ifNotProp } from "styled-tools";

const Button = styled.button`
  font-size: ${ifNotProp("large", "20px", "30px")};
`;

Returns PropsFn

withProp

Calls a function passing properties values as arguments.

Parameters

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`)};
  background: ${withProp(["foo", "bar"], (foo, bar) => `${foo}${bar}`)};
`;

Returns PropsFn

switchProp

Switches on a given prop. Returns the value or function for a given prop value. Third parameter is default value.

Parameters

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")
  }, prop("theme.sizes.md", "16px"))};
  ${switchProp("theme.kind", {
    light: css`
      color: LightBlue;
    `,
    dark: css`
      color: DarkBlue;
    `
  }, css`color: black;`)}
`;

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

Returns PropsFn

Types

Needle

A Needle is used to map the props to a value. This can either be done with a path string "theme.size.sm" or with a function (props) => props.theme.size.sm (these two examples are equivalent).

All of styled-tools can be used as Needles making it possible to do composition between functions. ie ifProp(theme("dark"), "black", "white")

Type: (string | Function)

License

MIT © Diego Haz


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,511,655
Reactjs (72,668
Utility (4,451
Styled Components (3,566
Css In Js (572
Emotion (552
Lodash (398
Jss (135
Related Projects