Repository navigation
Add --as-prop (--as-arg) flag #92
Description
--as-prop Flag proposal
--as-prop
--as-arg
--max-width-as-prop=300
--max-width=300 --as-prop
Usage
while specifying a dedicated value to a property, e.g. a max-width, we can add extra --as-prop flag to make it as a externally configurable property. which as a result, will generate the code below.
function Component ({maxWidth = 300}:{maxWidth: number}){
...
<Container maxWidth={maxWidth}>
</Container>
...
}
const Container = styled.div<{maxWidth: number}>`
...
max-width: ${p => p.maxWidth}px
...
`;
Activity
[-]Add --as-prop (--as-arg) flag[/-][+]Add `--as-prop` (`--as-arg`) flag[/+]