CODEWITHSUNDEEP
javascripthtmlreactjsstyled-components
The Dead Man
The Dead Man

Reputation: 5556

How to add props in react for styles?

I have a simple section in which I want to change the width dynamically

Here is section

<div className="form-control">
            <Formats>
                {styles.map(style => <ButtonStyled type="button" active={style.id === styleId} onClick={() => setStyleId(style.id)} key={`button-${style.name}`}>{style.name}</ButtonStyled>)}
                {activeStyle && <FormatsContent>
                    <FormatsDescription>{activeStyle.desciption}</FormatsDescription>
                    <Proportions>
                        {activeStyle.proportions.map(x => <Proportion onClick={() => setProportion(x.proportion)} active={proportion === x.proportion} width={x.width} height={x.height} key={`proportion-${x.proportion}`}>{x.proportionLabel}</Proportion>)}
                    </Proportions> 
                </FormatsContent>}
            </Formats>
        </div>

Here is style 

const Formats = styled.div`
    margin-left: 0px;
    padding:12px;
    background-color: ${gray.brightest};
    border-radius: 20px;
    width: 100%;
    & select {
    height: 31px;
    padding: 0;
    margin-left: 12px;
    }
`;

Now I want to add props to check if width is full or not isFullWidth:true/false

and on styles to use it like this, 

   const Formats = styled.div`
    margin-left: 0px;
    padding:12px;
    background-color: ${gray.brightest};
    border-radius: 20px;
    width: ${props => props.isFullWidth ? '100%' : '59%'}
    & select {
    height: 31px;
    padding: 0;
    margin-left: 12px;
    }
`;

What do I need to change to achieve what I want?

Upvotes: 0

Views: 139

Answers (2)

Leonardo Drici
Leonardo Drici

Reputation: 789

I think it is enough to pass the prop to the component and keep the last style you posted:

So it should be

<Formats isFullWidth>
...
</Formats>

EDIT: wrong prop name

Upvotes: 0

lomse
lomse

Reputation: 4165

The Format component should have isFullWidth prop holding either true or false as value as shown below:

The example below will give a 100% width

<Format isFullWidth ={true}>

</Format>

And this one will give a 59% width

<Format isFullWidth ={false}>

</Format>

Upvotes: 1

Related Questions