As noted in this answer it is possible to greatly simplify the amount of code needed to check for props in Styled-Components
. For example, compare this code:
${props =>
Object.keys(props)
.filter(key => colors[key])
.map(color => `color: ${colors[color]};`)
.join(' ')}
To this:
${props => props.white && `color: ${colors.white}`}
${props => props.light && `color: ${colors.light}`}
${props => props.grey && `color: ${colors.grey.base}`}
${props => props.dark && `color: ${colors.dark}`}
${props => props.black && `color: ${colors.black}`}
${props => props.info && `color: ${colors.info}`}
${props => props.success && `color: ${colors.success}`}
${props => props.warning && `color: ${colors.warning}`}
${props => props.error && `color: ${colors.error}`}
${props => props.link && `color: ${colors.link.base}`}
The first line is much DRYer than the second lines of code.
However, there are other use cases that I'd like to simplify my code for and I don't know how to do it.
For example, consider the following code:
${props => props.small === 'white' && `@media(min-width: 600px) {color: ${colors.white};}`}
${props => props.small === 'light' && `@media(min-width: 600px) {color: ${colors.light};}`}
${props => props.small === 'grey' && `@media(min-width: 600px) {color: ${colors.grey.base};}`}
${props => props.small === 'dark' && `@media(min-width: 600px) {color: ${colors.dark};}`}
${props => props.small === 'black' && `@media(min-width: 600px) {color: ${colors.black};}`}
${props => props.small === 'info' && `@media(min-width: 600px) {color: ${colors.info};}`}
${props => props.small === 'success' && `@media(min-width: 600px) {color: ${colors.success};}`}
${props => props.small === 'warning' && `@media(min-width: 600px) {color: ${colors.warning};}`}
${props => props.small === 'error' && `@media(min-width: 600px) {color: ${colors.error};}`}
${props => props.small === 'link' && `@media(min-width: 600px) {color: ${colors.link.base};}`}
This is very similar to what I have before, except for now I have a prop name called small
which takes a particular value. However, since the proper name takes a value, I cannot use the Object.keys
solution mentioned above.
What I would like to know is how to simplify the above code into a simple javascript statement - similar to the first line of code mentioned above.
Any ideas?
This one is very simple, you check if props.small
is a property of colors
and if yes, just return the value colors[props.small]
.
${props => colors[props.small] && `@media(min-width: 600px) {color: ${colors[props.small]};}`}