Simple and powerful lib to handle styled props in your components
yarn add styled-by
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>
);
}
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)
Option as string, will be applied when prop is present.
const Button = styled.button`
${styledBy('disabled', 'background: #CCC;')}
`;
<Button disabled />
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 />
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" />
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" />
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
MIT © Bruno Bertolini