Nothing Particularly Magnificent

    styled-by

    0.3.0 • Public • Published

    styled-by 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

    Install

    npm i styled-by

    DownloadsWeekly Downloads

    203

    Version

    0.3.0

    License

    MIT

    Last publish

    Collaborators

    • avatar