{"id":22893330,"url":"https://github.com/yet3/react-native-quick-style","last_synced_at":"2025-03-31T22:32:43.480Z","repository":{"id":65730170,"uuid":"593807988","full_name":"yet3/react-native-quick-style","owner":"yet3","description":"Make changing often used styles on your components easier.","archived":false,"fork":false,"pushed_at":"2023-02-07T12:48:11.000Z","size":629,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-10T21:04:48.831Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/yet3.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2023-01-26T22:02:50.000Z","updated_at":"2023-02-07T01:20:49.000Z","dependencies_parsed_at":"2023-02-19T14:30:59.431Z","dependency_job_id":null,"html_url":"https://github.com/yet3/react-native-quick-style","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yet3%2Freact-native-quick-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yet3%2Freact-native-quick-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yet3%2Freact-native-quick-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yet3%2Freact-native-quick-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yet3","download_url":"https://codeload.github.com/yet3/react-native-quick-style/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246552300,"owners_count":20795799,"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":[],"created_at":"2024-12-13T23:14:04.880Z","updated_at":"2025-03-31T22:32:43.447Z","avatar_url":"https://github.com/yet3.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @yet3/react-native-quick-style\n\n![GitHub license](https://img.shields.io/github/license/yet3/react-native-quick-style?style=flat)\n\u003ca href='https://www.npmjs.com/package/@yet3/react-native-quick-style'\u003e\n![npm](https://img.shields.io/npm/v/@yet3/react-native-quick-style)\n\u003c/a\u003e\n\n![react-native-quick-style preview](./public/auto-cmp-preview.gif)\n\nMake changing often used styles on your components easier.\n\nExpo snack: https://snack.expo.dev/@yet3/yet3-react-native-quick-style-snack\n\n## Installation\n\n```sh\nnpm install @yet3/react-native-quick-style\n```\n\nor\n\n```sh\nyarn add @yet3/react-native-quick-style\n```\n\n## Usage\n\n```ts\nimport {\n  qs,\n  qsPrefix,\n  withQuickStyle,\n  QsProps,\n} from '@yet3/react-native-quick-style';\n\nconst qsConfig = qs({\n  style: {\n    props: {\n      mt: 'marginTop',\n      mb: 'marginBottom',\n      mr: 'marginRight',\n      ml: 'marginLeft',\n      bgColor: (_: 'red' | 'blue' | 'yellow') =\u003e 'backgroundColor',\n      size: (value: 'sm' | 'lg') =\u003e {\n        return {\n          width: value === 'sm' ? 50 : 100\n          height: value === 'sm' ? 25 : 50\n        }\n      }\n    },\n  },\n  textStyle: {\n    prefix: qsPrefix('text'),\n    props: {\n      size: 'fontSize',\n      color: 'color',\n    },\n  },\n});\n\ninterface Props extends QsProps\u003ctypeof qsConfig\u003e {}\n\nexport const MyComponent = withQuickStyle(({ style, textStyle }: Props) =\u003e {\n  ...\n}, qsConfig);\n```\n\nAlternatively you can use `useQuickStyle` hook\n\n```tsx\nimport {\n  qs,\n  qsPrefix,\n  useQuickStyle,\n  QsProps,\n} from '@yet3/react-native-quick-style';\n...\nexport const MyComponent = (props: Props) =\u003e {\n  const { style, textStyle } = useQuickStyle(qsConfig, props)\n  ...\n};\n```\n\n```tsx\n\u003cMyComponent mt={12} mb={6} bgColor=\"blue\" textSize={18} /\u003e\n```\n\n### QsConfig\n\n|      **Name**      |           **Type**            | **Default value** |\n| :----------------: | :---------------------------: | :---------------: |\n| overrideStyleProps |     boolean \\| undefined      |       true        |\n|    stripQsProps    |     boolean \\| undefined      |       false       |\n|       prefix       |      string \\| undefined      |     undefined     |\n|       props        | [QsStyleProps](#qsstyleprops) |                   |\n\n```tsx\nqs({\n  ...\n  style: {\n    overrideStyleProps: true,\n    stripQsProps: false,\n    prefix: qsPrefix('myPrefix'),\n    props: {\n      size: 'fontSize', // -\u003e myPrefixSize\n      color: 'color', // -\u003e myPrefixColor\n    },\n  },\n});\n```\n\n### QsStyleProps\n\nkey-value pair where key is name of qs' prop and value is name of css property:\n\n```js\n{\n  mt: 'marginTop',\n}\n```\n\nor function returning style object or name of css property:\n\n```js\n{\n  size: (value: 'sm' | 'lg') =\u003e {\n    return {\n      width: value === 'sm' ? 50 : 100\n      height: value === 'sm' ? 25 : 50\n    }\n  },\n  bgColor: (_: 'red' | 'blue' | 'yellow') =\u003e 'backgroundColor',\n}\n```\n\n### Options\n\n```ts\nconst qsConfig = qs({\n  ...\n}, {\n  overrideStyleProps: true, // DEFAULT\n  stripQsProps: false, // DEFAULT\n});\n```\n\n### LooseStringCmp\n\nUse `LooseStringCmp` util type for nice auto-completion of literal string unions\n\n```ts\nimport { LooseStringCmp } from '@yet3/react-native-quick-style';\n\nconst qsConfig = qs({\n  style: {\n    props: {\n      mt: (value: LooseStringCmp\u003c'sm' | 'md' | 'lg'\u003e | number) =\u003e {\n        ...\n        return {\n          marginTop: ...\n        }\n      },\n      ...\n    },\n  },\n  ...\n});\n\n...\n```\n\n## License\n\nMIT\n\n---\n\nMade with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyet3%2Freact-native-quick-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyet3%2Freact-native-quick-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyet3%2Freact-native-quick-style/lists"}