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