/styled-by

Simple and powerful lib to handle styled props in your components

Primary LanguageJavaScriptMIT LicenseMIT

StyledBy

Build Status codecov

Simple and powerful lib to handle styled props in your components

Install

yarn add styled-by

Basic usage

import React from 'react';
import styled from 'styled-components';
import styledBy from 'styled-by';

const Button = styled.button`
  background: ${styledBy('background')};
  color: ${styledBy('color')};
  padding: 10px;
  border-radius: 10px;
`;

export default function App() {
  return (
    <Button background="#FFF" color="rgba(0,0,0,0.5)">
      Ok
    </Button>
  );
}

Options

Basicaly, if you use styledBy('prop'), it returns prop value. But, if you want do more, use options.

Options can be:

  • string;
  • function;
  • object (and object value can be string or function)

String

Option as string, will be applied when prop is present.

const Button = styled.button`
  ${styledBy('disabled', 'background: #CCC;')}
`

<Button disabled />

Function

Option as function, always will be called passing props, even if props is undefined

  const Button = styled.button`
  ${styledBy('disabled', props => `background: ${props.disabled ? '#CCC' : '#FFF'};`)}
`

<Button disabled />

Object String

Option as object string, will be handled by prop value

const Button = styled.button`
  ${styledBy('corner', {
    rounded: `border-radius: 5px;`,
    circle: `border-radius: 100px;`
  })}
`

<Button corner="rounded" />

When option is a object, and styledBy don't find passed option, and if _ option is defined as a function, call it.

const Button = styled.button`
  ${styledBy('corner', {
    _: ({ corner }) => {}
    rounded: `border-radius: 5px;`,
    circle: `border-radius: 100px;`
  })}
`

<Button corner="square" />

Object Function

Option as object function, will be handled by prop value, and call function as prop param

const Button = styled.button`
  ${styledBy('kind', {
    default: ({ theme, color }) => `
      background: ${theme.colors[color].base};
      color: ${theme.colors[color].contrast};
      border: none;
    `,
    outline: ({ theme, color }) => `
      background: transparent;
      color: ${theme.colors[color].base};
      border: 1px solid ${theme.colors[color].base};
    `,
    clean: ({ theme, color }) => `
      background: transparent;
      color: ${theme.colors[color].base};
      border: none;
    `
  })}
`

<Button color="primary" kind="outline" />

Options list

Instead of prop name in firts param, you can pass many options as a object

const Button = styled.button`
  ${styledBy({
    disabled: `background: #CCC;`,
    corner: {
      square: 'border-radius: 0;',
      rounded: 'border-radius: 5px;',
      circle: 'border-radius: 50px;'
    }
  })}
`

This works like many styledBy props declarations

License

MIT © Bruno Bertolini