Nightly Perpetrated Mischief

    styled-map
    TypeScript icon, indicating that this package has built-in type declarations

    3.3.0 • Public • Published




    A better way to map props to styles

    Simple CSS-like syntax, for Styled Components and Emotion


    Total downloads GitHub Stars Bundle size MIT License


    Example

    Install

    yarn add styled-map

    or

    npm install styled-map --save

    Why use Styled Map?

    Styled Map simplifies your components' CSS, making your code cleaner and clearer wherever you use props to alter styles.

    Without Styled Map

    With Styled Components alone, you'll often do something like this:

    const Button = styled.button`
      color: ${props => props.primary ? '#0c0' : '#ccc'};
    `;
     

    but this quickly turns messy:

    const Button = styled.button`
     color: ${props =>
       props.primary && '#0c0' ||
       props.warning && '#c00' ||
       props.info && '#0cc' ||
       '#ccc'
     };
     border: 2px solid ${props =>
       props.primary && '#0c0' ||
       props.warning && '#c00' ||
       props.info && '#0cc' ||
       '#ccc'
     };
     font-size: ${props =>
       props.small && '8px' ||
       props.medium && '18px' ||
       props.large && '32px' ||
       '16px'
     };
    `;
     
    <Button primary large>Submit</Button>

    With Styled Map

    Here's the same component using styled-map:

    import styledMap from 'styled-map';
     
    const buttonColor = styledMap`
      primary: #0c0;
      warning: #c00;
      info: #0cc;
      default: #ccc;
    `;
     
    const Button = styled.button`
      color: ${buttonColor};
      border: 2px solid ${buttonColor};
      font-size: ${styledMap`
        large: 32px;
        small: 8px;
        medium: 18px;
        default: 16px;
      `};
    `;
     
    <Button primary large>Submit</Button>
     

    Much better!

    Note: If there are no matching props, styled-map will look for a "default" item in your map. If it doesn't find one it will use the last item by default.

    What's with the pseudo-CSS syntax?

    Until v3.0, Styled Map used JavaScript objects like this. Read more about the decision to use a new syntax.

    You can still use objects if you prefer, and there are currently no plans to deprecate this option.

    Usage with themes

    Styled Map makes mapping to themes incredibly easy with the mapToTheme function.

    Simply set up your themes like this:

    const myTheme = {
      buttonColor: {
        primary: 'orange',
        warning: 'red',
        info: 'blue',
        default: 'white',
      },
      ...
    };

    and now you can do this:

    import styledMap, { mapToTheme as theme } from 'styled-map';
     
    const Button = styled.button`
      color: ${theme('buttonColor')};
      border: 2px solid ${theme('buttonColor')};
    `;
     

    Note: importing as theme is optional, but it reads a lot better!

    Nested theme objects

    Nested objects can be refered to with dots, so you can write theme('colors.button') if your theme looks like this:

    const theme = {
      colors: {
        button: {
          primary: '#b00',
          info: '#0b0',
          etc: '#00f',
        }
      }
    }

    Optionally mapping to prop values

    Sometimes you'll want to map styles to the value of a prop instead of using prop keys. This is especially useful if you have something like a type variable to pass to your component and you don't want to do something like <Button {...{[type]:true}} />.

    You can use styled-map in these situations by simply passing a prop name as the first argument.

    const Button = styled.button`
      background: ${styledMap('type', {
        primary: '#c00',
        default: '#ddd',
      })};
    `;

    styled-map will then look at the Button's type prop for a matching value.

    This also works in mapToTheme:

    import styledMap, { mapToTheme as theme } from 'styled-map';
     
    const myTheme = {
      buttonColor: {
        primary: 'orange',
        warning: 'red',
        info: 'blue',
        default: 'white',
      },
      ...
    };
     
    const Button = styled.button`
      color: ${theme('buttonColor', 'kind')};
    `;
     
    <Button kind='warning'>Click</Button> // will be red

    Note: This currently doesn't work doesn't work with the pseudo-CSS syntax. This functionality should arrive by v4.0. PRs welcome!:

    Typings

    We currently have TypeScript typings in release candidate stage @ 3.2.0-rc.1. Please upgrade specifically to styled-map@3.2.0-rc.1 if you want typings now.

    License

    MIT Copyright 2017–2018

    Install

    npm i styled-map

    DownloadsWeekly Downloads

    5,119

    Version

    3.3.0

    License

    MIT

    Unpacked Size

    218 kB

    Total Files

    10

    Last publish

    Collaborators

    • scf4