styled-by

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