code icon indicating copy to clipboard operation
code copied to clipboard

Add `--as-prop` (`--as-arg`) flag

Open softmarshmallow opened this issue 4 years ago • 0 comments

--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
    ...
`;

softmarshmallow avatar Dec 08 '21 08:12 softmarshmallow