{"id":13776977,"url":"https://github.com/scf4/styled-map","last_synced_at":"2025-09-28T23:30:21.756Z","repository":{"id":44631959,"uuid":"89494386","full_name":"scf4/styled-map","owner":"scf4","description":"✨A super simple way to map props to styles with Styled Components ⚠️ See README.md","archived":true,"fork":false,"pushed_at":"2022-02-03T13:48:34.000Z","size":656,"stargazers_count":592,"open_issues_count":0,"forks_count":14,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-01-08T03:44:02.084Z","etag":null,"topics":["css","emotionjs","helper","helpers","react","styled-components"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scf4.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-04-26T15:03:13.000Z","updated_at":"2024-11-22T16:20:23.000Z","dependencies_parsed_at":"2022-08-27T06:51:52.014Z","dependency_job_id":null,"html_url":"https://github.com/scf4/styled-map","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scf4%2Fstyled-map","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scf4%2Fstyled-map/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scf4%2Fstyled-map/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scf4%2Fstyled-map/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scf4","download_url":"https://codeload.github.com/scf4/styled-map/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234569711,"owners_count":18854133,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","emotionjs","helper","helpers","react","styled-components"],"created_at":"2024-08-03T18:00:35.882Z","updated_at":"2025-09-28T23:30:21.238Z","avatar_url":"https://github.com/scf4.png","language":"JavaScript","funding_links":[],"categories":["Libraries"],"sub_categories":[],"readme":"\u003e ⚠️ As off 2022, I don't recomend using this as part of the foundation for a styling system for anything but small projects.\n\n\u003e While this package is simple and lightweight and solves a common problem in a familiar way, I suggest you try styled-system or Shopify's [Restyle](https://github.com/Shopify/restyle) (especially if you're using React Native) instead — or a component library inspired by (or built with) those tools. \n\u003e \n\u003e There's a little more work upfront but it makes building performant UIs with React a lot faster and more consistent.\n\n\u003e No more work will go into this package as of Febuary 2022. If you'd like an active fork to be linked here please contact me.\n\n\u003cbr /\u003e\u003cdiv align=\"center\"\u003e\n  \n\u003cimg src=\"https://i.imgur.com/IQ37K7m.png\" width=\"249px\" /\u003e\u003cbr /\u003e\n\u003cbr /\u003e\n  \n**A better way to map props to styles**\n\n**Simple CSS-like syntax, for Styled Components and Emotion**\n\n\u003cbr /\u003e\n\n\u003ca href=\"https://www.npmjs.com/package/styled-map\" target=\"_blank\"\u003e\u003cimg src=\"https://img.shields.io/badge/dynamic/json.svg?label=downloads\u0026url=https%3A%2F%2Fapi.npmjs.org%2Fdownloads%2Fpoint%2F2017-01-01%3A2021-01-01%2Fstyled-map\u0026query=downloads\u0026colorB=blue\" alt=\"Total downloads\" height=\"20px\" width=\"114px\" /\u003e\u003c/a\u003e \u003ca href=\"https://github.com/scf4/styled-map/stargazers\"\u003e\u003cimg src=\"https://img.shields.io/github/stars/scf4/styled-map.svg\" alt=\"GitHub Stars\" height=\"20px\" style=\"min-width: 68px\" /\u003e\u003c/a\u003e \u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/bundlephobia/minzip/styled-map.svg\" alt=\"Bundle size\" height=\"20px\" style=\"min-width: 132px\" /\u003e\u003c/a\u003e \u003ca href=\"#\"\u003e\u003cimg src=\"https://img.shields.io/packagist/l/doctrine/orm.svg\" alt=\"MIT License\" height=\"20px\" width=\"78px\" /\u003e\u003c/a\u003e\u003cbr /\u003e\u003cbr /\u003e\u003cbr /\u003e\n\n\u003c/div\u003e\n\n## Example\n\n\u003cdiv style=\"width: 100%\"\u003e\n  \u003cimg src=\"https://i.imgur.com/aohFk5k.png\" style=\"max-width: 100%; max-height: auto;\" width=\"522px\" /\u003e\n\u003cdiv\u003e\n\n\n## Install\n`yarn add styled-map`\n\nor\n\n`npm install styled-map --save`\n\n## Why use Styled Map?\n\nStyled Map simplifies your components' CSS, making your code cleaner and clearer wherever you use props to alter styles.\n\n### Without Styled Map\nWith Styled Components alone, you'll often do something like this:\n\n```js\nconst Button = styled.button`\n  color: ${props =\u003e props.primary ? '#0c0' : '#ccc'};\n`;\n\n ```\n\n but this quickly turns messy:\n\n ```js\nconst Button = styled.button`\n  color: ${props =\u003e\n    props.primary \u0026\u0026 '#0c0' ||\n    props.warning \u0026\u0026 '#c00' ||\n    props.info \u0026\u0026 '#0cc' ||\n    '#ccc'\n  };\n  border: 2px solid ${props =\u003e\n    props.primary \u0026\u0026 '#0c0' ||\n    props.warning \u0026\u0026 '#c00' ||\n    props.info \u0026\u0026 '#0cc' ||\n    '#ccc'\n  };\n  font-size: ${props =\u003e\n    props.small \u0026\u0026 '8px' ||\n    props.medium \u0026\u0026 '18px' ||\n    props.large \u0026\u0026 '32px' ||\n    '16px'\n  };\n`;\n\n\u003cButton primary large\u003eSubmit\u003c/Button\u003e\n ```\n\n### With Styled Map\nHere's the same component using `styled-map`:\n\n```js\nimport styledMap from 'styled-map';\n\nconst buttonColor = styledMap`\n  primary: #0c0;\n  warning: #c00;\n  info: #0cc;\n  default: #ccc;\n`;\n\nconst Button = styled.button`\n  color: ${buttonColor};\n  border: 2px solid ${buttonColor};\n  font-size: ${styledMap`\n    large: 32px;\n    small: 8px;\n    medium: 18px;\n    default: 16px;\n  `};\n`;\n\n\u003cButton primary large\u003eSubmit\u003c/Button\u003e\n\n```\n\nMuch better! \n\n\u003e 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.\n\n## Usage with themes\n\nStyled Map makes mapping to themes incredibly easy with the `mapToTheme` function.\n\nSimply set up your themes like this:\n\n```js\nconst myTheme = {\n  buttonColor: {\n    primary: 'orange',\n    warning: 'red',\n    info: 'blue',\n    default: 'white',\n  },\n  ...\n};\n```\n\nand now you can do this:\n\n```js\nimport styledMap, { mapToTheme as theme } from 'styled-map';\n\nconst Button = styled.button`\n  color: ${theme('buttonColor')};\n  border: 2px solid ${theme('buttonColor')};\n`;\n\n```\n\n\u003e Note: importing `as theme` is optional, but it reads a lot better!\n\n### Nested theme objects\n\nNested objects can be refered to with dots, so you can write `theme('colors.button')` if your theme looks like this:\n\n```js\nconst theme = {\n  colors: {\n    button: {\n      primary: '#b00',\n      info: '#0b0',\n      etc: '#00f',\n    }\n  }\n}\n```\n\n## Optionally mapping to prop values \n\nSometimes 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 `\u003cButton {...{[type]:true}} /\u003e`.\n\nYou can use `styled-map` in these situations by simply passing a prop name as the first argument. \n\n```js\nconst Button = styled.button`\n  background: ${styledMap('type', {\n    primary: '#c00',\n    default: '#ddd',\n  })};\n`;\n```\n\n`styled-map` will then look at the Button's `type` prop for a matching value.\n\nThis also works in `mapToTheme`:\n```js\nimport styledMap, { mapToTheme as theme } from 'styled-map';\n\nconst myTheme = {\n  buttonColor: {\n    primary: 'orange',\n    warning: 'red',\n    info: 'blue',\n    default: 'white',\n  },\n  ...\n};\n\nconst Button = styled.button`\n  color: ${theme('buttonColor', 'kind')};\n`;\n\n\u003cButton kind='warning'\u003eClick\u003c/Button\u003e // will be red\n```\n\n**Note: This currently doesn't work with the pseudo-CSS syntax ([new in v3.0](https://github.com/scf4/styled-map/issues/7)). This functionality should arrive by v4.0. PRs welcome!**:\n\n## Typings\n\nStyledMap has TypeScript typings since version `3.2.0`.\n\n## License\n\nMIT Copyright 2017–2019\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscf4%2Fstyled-map","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscf4%2Fstyled-map","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscf4%2Fstyled-map/lists"}