Skip to content

Add --as-prop (--as-arg) flag #92

@softmarshmallow

Description

@softmarshmallow

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions