styled-utils

Introduction

styled-utils is a collection of util functions for styled-components

Installation

npm install styled-utils --save

yarn add styled-utils

Usage

Play with it here

Example

import React from 'react'
import styled, { ThemeProvider } from 'styled-components'
import { withColor, withHover, withSize, withDisplay, isOutlined } from 'styled-utils'


const Button = styled.a`
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 0 1.5em;
  height: 2.25em;
  border: 1px solid transparent;
  border-radius: 5px;
  margin: 0 5px 5px 0;
  cursor: pointer;
  text-align: center;

  ${withColor}
  ${withHover}
  ${withSize}
  ${withDisplay}
  ${isOutlined}
`

const theme = {}

theme.palettes = {
  primary: ['#1b8ceb', '#106cb9'],
  success: ['#4caf50', '#388e3c'],
  danger: ['#e91e63', '#c2185b'],
  white: ['#fff', '#fff']
}

theme.sizes = {
  maxWidth: '600px',
  font: {tiny: '0.55rem', small: '0.75rem', medium: '1rem', large: '1.25rem', big: '1.5rem', huge: '2rem'}
}

const Main = props => {
  return (
    <ThemeProvider theme={theme}>
      <div>
        <Button color='primary'>Click Me</Button>
        <Button color='success'>Click Me</Button>
        <Button color='danger' isOutlined>Click Me</Button>
        <Button color='white' isInverted>Click Me</Button>
        <Button color='primary' display='flex' size='large'>Click Me</Button>
        <Button color='primary' size='tiny'>Click Me</Button>
      </div>
    </ThemeProvider>
  )
}

export default Main