Recommended way of passing props down to component

[gilesbutler]

Hey @scf4, thanks for the repo, great idea!

Just wondering what's the best way of handing down props to a component using styled-map. not even sure the correct way of describing this or I'm missing something glaringly obvious!

But as an example, if I want to pass down say primary as the type prop to the button component...

const { type } = this.props;
<Button large primary>Click me!</Button>

The only way I've found so far is...

<Button large {...{[type]: true}}>Click me!</Button>

Hoping there's a cleaner solution :)

Thanks

[scf4]

Hey Giles, to be honest I don't think there's a cleaner way to have dynamic prop names in React, but it shouldn't be too hard to modify styled-map to optionally handle the value of a prop instead of the key.

I think the API could look something like this:

color: ${styledMap('propName', {
  primary: 'red',
  default: 'gray',
})};

I'll push an update later this week with this feature.

[scf4]

@gilesbutler You can now pass in a prop name as a string with the latest version (2.0.0).

[gilesbutler]

Hey Scott, thanks for the response and super fast update 🙌

How does that new setup work with themes?

it would be awesome to be able to do something like...

color: ${styledMap('propName', {
    primary: p.theme.colors.red,
    default: p.theme.colors.gray,
})};

I think it's better being able to declare the colours with the props from the theme.
With the current way styled-map handles themes in the theme file, we have to either declare our colours twice or extend the theme object like this...

theme = {
    colors = {
        green: ...
    }
}

theme.buttonColors = {
    success: theme.colors.green,
    warning: theme.colors.yellow,
    error: theme.colors.red,
    default: theme.colors.gray,
};

This means our styles are being declared in two places and it's more context switching.

It's easier to look at this alongside the rest of your code and know what's going on

color: ${styledMap('propName', {
    primary: p.theme.colors.red,
    default: p.theme.colors.gray,
})};

or even...

const colors = ${styledMap('propName', {
    primary: p.theme.colors.red,
    default: p.theme.colors.gray,
})};

color: ${colors}

compared to this...

color: ${theme('buttonColors')};

Thoughts?

[scf4]

That'd be a little more involved which I don't have time for ATM, but I'd happily accept a PR 😄

[gilesbutler]

Thanks @scf4 likewise, pretty under the pump at the minute. If I get a chance I'll submit a PR 👍