styled-by
Simple and powerful lib to handle styled props in your components
Install
yarn add styled-by
Basic usage
;;; const Button = styledbutton` background: ; color: ; padding: 10px; border-radius: 10px; `; { 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 = styledbutton` `; <Button disabled />
Function
Option as function, always will be called passing props, even if props is undefined
const Button = styledbutton` `; <Button disabled />
Object String
Option as object string, will be handled by prop value
const Button = styledbutton` `; <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 = styledbutton` `; <Button corner="square" />
Object Function
Option as object function, will be handled by prop value, and call function as prop param
const Button = styledbutton` `; <Button color="primary" kind="outline" />
Options list
Instead of prop name in firts param, you can pass many options as a object
const Button = styledbutton` `;
This works like many styledBy props declarations
License
MIT © Bruno Bertolini