{"id":14384869,"url":"https://github.com/RafalFilipek/styled-props","last_synced_at":"2025-08-23T18:30:50.970Z","repository":{"id":57373363,"uuid":"78516887","full_name":"RafalFilipek/styled-props","owner":"RafalFilipek","description":"Simple lib that allows you to set styled props in your styled-components without stress. ","archived":true,"fork":false,"pushed_at":"2019-08-13T19:53:54.000Z","size":1715,"stargazers_count":241,"open_issues_count":16,"forks_count":9,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-12-17T19:58:23.786Z","etag":null,"topics":["css-in-js","react","styled-components","styled-props"],"latest_commit_sha":null,"homepage":"https://github.com/RafalFilipek/styled-props","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/RafalFilipek.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-10T09:15:48.000Z","updated_at":"2023-12-31T01:41:08.000Z","dependencies_parsed_at":"2022-08-29T14:43:21.488Z","dependency_job_id":null,"html_url":"https://github.com/RafalFilipek/styled-props","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RafalFilipek%2Fstyled-props","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RafalFilipek%2Fstyled-props/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RafalFilipek%2Fstyled-props/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RafalFilipek%2Fstyled-props/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RafalFilipek","download_url":"https://codeload.github.com/RafalFilipek/styled-props/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230720928,"owners_count":18270478,"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-in-js","react","styled-components","styled-props"],"created_at":"2024-08-28T18:01:44.323Z","updated_at":"2024-12-21T13:30:22.242Z","avatar_url":"https://github.com/RafalFilipek.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"![](https://raw.githubusercontent.com/RafalFilipek/styled-props/master/logo.png)\n\n---\n\n[![npm version](https://badge.fury.io/js/styled-props.svg)](https://badge.fury.io/js/styled-props)\n[![Greenkeeper badge](https://badges.greenkeeper.io/RafalFilipek/styled-props.svg)](https://greenkeeper.io/)\n[![Build Status](https://travis-ci.org/RafalFilipek/styled-props.svg?branch=master)](https://travis-ci.org/RafalFilipek/styled-props)\n[![Code Coverage](https://img.shields.io/codecov/c/github/RafalFilipek/styled-props/master.svg)](https://codecov.io/gh/RafalFilipek/styled-props)\n![downloads](https://img.shields.io/npm/dm/styled-props.svg)\n[![styled with prettier](https://img.shields.io/badge/styled_with-prettier-ff69b4.svg)](https://github.com/prettier/prettier)\n\nSimple lib that allows you to set *styled props* in your [*styled-components*](https://styled-components.com) without stress. Let's take `Button` component from styled-components web page. Here it is:\n\n```jsx\nconst Button = styled.button`\n  font-size: 1em;\n  margin: 1em;\n  padding: 0.25 em 1em;\n  border: 2px solid palevioletred;\n  border radius: 3px;\n\n  background: ${props =\u003e props.primary \u0026\u0026 'palevioletred'}\n  color: ${props =\u003e props.primary ? 'white' : 'palevioletred'}\n`;\n```\n\nNow you can simply write\n\n```jsx\n\u003cButton\u003eHello\u003c/Button\u003e or \u003cButton primary\u003eWorld!\u003c/Button\u003e\n```\n\nBut your application is probably much bigger than single button. And you want to keep your colors, sizes etc. in one place. So let's create simple `styles.js` file.\n\n```js\n// styles.js\n\nexport const background = {\n  primary: '#F5F5F5',\n  danger: '#DD2C00',\n  success: '#7CB342',\n  info: '#BBDEFB',\n};\n\nexport const color = {\n  primary: '#263238',\n  default: '#FAFAFA',\n};\n\nexport const size = {\n  padding: {\n    small: 10,\n    medium: 20,\n    big: 30,\n  },\n  borderRadius: {\n    small: 5,\n    default: 10,\n  },\n};\n```\n\n\u003e `styles.js` file is cool because you can access them anywhere! You can also generate some style guides and of course keep all information in one place.\n\n\u003e **IMPORTANT** It is better to use singular forms for keys. In `bind` mode keys are used to set fallbacks so `color` is better than `colors` as a prop.\n\nSo how can I help? `styled-props` package exports single function called `styledProps`. You can use it in all your components.\n\n### TL;DR; Examples\n\n - [Basic usage](https://codesandbox.io/s/n5X21gBYR)\n - [Default props](https://codesandbox.io/s/2k6VL6wgz)\n - [Bind](https://codesandbox.io/s/gJxQvB1Bk)\n\n\n### Installation\n\n```\nyarn add styled-props\n\n// or\n\nnpm install styled-props\n```\n\n### Basic usage\n\n```jsx\nimport styledProps from 'styled-props';\nimport styled from 'styled-components';\nimport {\n  background,\n  color,\n  size,\n} from './styles.js';\n\nconst Button = styled.button`\n  background: ${styledProps(background)};\n  color: ${styledProps(color)};\n  padding: ${styledProps(size.padding)}px;\n  border-radius: ${styledProps(size.borderRadius)}px;\n\n  font-size: 1em;\n  margin: 1em;\n  border: 2px solid palevioletred;\n`;\n\nexport default () =\u003e (\n  \u003cdiv\u003e\n    \u003cButton primary small\u003eThis\u003c/Button\u003e\n    \u003cButton info medium\u003eis\u003c/Button\u003e\n    \u003cButton danger big\u003eso\u003c/Button\u003e\n    \u003cButton success medium\u003ecool!\u003c/Button\u003e\n  \u003c/div\u003e\n)\n```\n\nAs you can see each prop can be mapped into specific value for selected css rule. If you need another combination, you just add it in `styles.js`.\n\n### Default values\n\nEverything is based on props. As we know in React you can set `defaultProps` for each component. You can also use them to set default values for styles. For example:\n\n```jsx\nconst Button = styled.button`\n  color: ${styledProps(color, 'color')}\n`;\nButton.defaultProps = {\n  color: 'default',\n};\n```\n\nIf you will not provide `primary` or `default` property for Button component `styledProps` function will check value of `color` property and use it as a key in `color` map. In our case default color is `color.white`. This is quite cool because you can also set styles the old way:\n\n```jsx\n\u003cButton color=\"primary\" size=\"big\" /\u003e\n```\n\n### Bind\n\nWhen your component is full of dynamic styles you can ( from `v0.1.0`) use `bind` options to simplify things.\n\n```js\n//styles.js\nexport default {\n  color: {\n    red: '#990000',\n    white: '#ffffff',\n    black: '#000000',\n  },\n  size: {\n    small: 10,\n    medium: 20,\n    big: 30,\n  }\n}\n```\n\n```jsx\nimport styles from './styles';\nimport { bindStyles } from 'styled-props';\n\n// or alternatively\n\n// import { bind } from 'styled-props';\n\ns = bindStyles(styles);\n\nexport default styled.button`\n  color: ${s.color};\n  padding: ${s.size};\n`;\n```\n\n\u003e As you can see `bind` is available as `bind` or `bindStyles` in case you're using lodash or any other library to for e.g bind functions context.\n\nEach key in `s` provides `styledProps` function. Also default value is set automaticly with `key` from map.\n\n```\ns.color === styledProps(styles.color, 'color');\n```\n\n### API\n\n```\nstyledProps(stylesMap:Object, [fallbackKey]:string)\n\nstyledPropsBind(collectionsMap:Object)\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRafalFilipek%2Fstyled-props","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FRafalFilipek%2Fstyled-props","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FRafalFilipek%2Fstyled-props/lists"}