{"id":17963357,"url":"https://github.com/kristerkari/babel-plugin-react-native-classname-to-dynamic-style","last_synced_at":"2025-03-25T05:32:15.829Z","repository":{"id":31055837,"uuid":"126740894","full_name":"kristerkari/babel-plugin-react-native-classname-to-dynamic-style","owner":"kristerkari","description":"Transform JSX className property to a style property that gets calculated at runtime in React Native. The plugin is used to match style objects containing parsed CSS media queries and CSS viewport units with React Native.","archived":false,"fork":false,"pushed_at":"2022-12-07T17:53:46.000Z","size":449,"stargazers_count":13,"open_issues_count":9,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-19T09:14:11.472Z","etag":null,"topics":["babel","babel-plugin","classname","dynamic","react-native","style","transform"],"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/kristerkari.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":"2018-03-25T21:14:49.000Z","updated_at":"2023-07-23T17:50:32.000Z","dependencies_parsed_at":"2023-01-14T18:30:36.836Z","dependency_job_id":null,"html_url":"https://github.com/kristerkari/babel-plugin-react-native-classname-to-dynamic-style","commit_stats":null,"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Fbabel-plugin-react-native-classname-to-dynamic-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Fbabel-plugin-react-native-classname-to-dynamic-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Fbabel-plugin-react-native-classname-to-dynamic-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Fbabel-plugin-react-native-classname-to-dynamic-style/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kristerkari","download_url":"https://codeload.github.com/kristerkari/babel-plugin-react-native-classname-to-dynamic-style/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245407589,"owners_count":20610228,"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":["babel","babel-plugin","classname","dynamic","react-native","style","transform"],"created_at":"2024-10-29T11:35:08.741Z","updated_at":"2025-03-25T05:32:15.488Z","avatar_url":"https://github.com/kristerkari.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-react-native-classname-to-dynamic-style\n\n[![NPM version](http://img.shields.io/npm/v/babel-plugin-react-native-classname-to-dynamic-style.svg)](https://www.npmjs.org/package/babel-plugin-react-native-classname-to-dynamic-style)\n[![Build Status](https://travis-ci.org/kristerkari/babel-plugin-react-native-classname-to-dynamic-style.svg?branch=master)](https://travis-ci.org/kristerkari/babel-plugin-react-native-classname-to-dynamic-style)\n[![Build status](https://ci.appveyor.com/api/projects/status/5p0fwhwupis2iojr/branch/master?svg=true)](https://ci.appveyor.com/project/kristerkari/babel-plugin-react-native-classname-to-dynamic-sty/branch/master)\n[![Coverage Status](https://coveralls.io/repos/github/kristerkari/babel-plugin-react-native-classname-to-dynamic-style/badge.svg?branch=master)](https://coveralls.io/github/kristerkari/babel-plugin-react-native-classname-to-dynamic-style?branch=master)\n[![Downloads per month](https://img.shields.io/npm/dm/babel-plugin-react-native-classname-to-dynamic-style.svg)](http://npmcharts.com/compare/babel-plugin-react-native-classname-to-dynamic-style?periodLength=30)\n[![Contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen.svg?style=flat)](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)\n\nTransform JSX `className` property to a `style` property that calculates styles at runtime in React Native. The plugin is used to match style objects containing parsed CSS media queries and CSS viewport units with React Native.\n\n## Usage\n\n### Step 1: Install\n\n```sh\nyarn add --dev babel-plugin-react-native-classname-to-dynamic-style\n```\n\nor\n\n```sh\nnpm install --save-dev babel-plugin-react-native-classname-to-dynamic-style\n```\n\n### Step 2: Configure `.babelrc`\n\n```\n{\n  \"presets\": [\n    \"react-native\"\n  ],\n  \"plugins\": [\n    \"react-native-classname-to-dynamic-style\"\n  ]\n}\n```\n\n## Syntax\n\n## Single class\n\nExample:\n\n```jsx\n\u003cText className={styles.myClass} /\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nvar _reactNativeDynamicStyleProcessor = require(\"react-native-dynamic-style-processor\");\n\n\u003cText style={_reactNativeDynamicStyleProcessor.process(styles).myClass} /\u003e;\n```\n\n---\n\n...or with `className` and `style`:\n\n```jsx\n\u003cText className={styles.myClass} style={{ color: \"blue\" }} /\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nvar _reactNativeDynamicStyleProcessor = require(\"react-native-dynamic-style-processor\");\n\n\u003cText\n  style={[\n    _reactNativeDynamicStyleProcessor.process(styles).myClass,\n    { color: \"blue\" }\n  ]}\n/\u003e;\n```\n\n## Multiple classes\n\n#### Using `[styles.class1, styles.class2].join(\" \")` syntax\n\nExample:\n\n```jsx\n\u003cText className={[styles.class1, styles.class2].join(\" \")} /\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nvar _reactNativeDynamicStyleProcessor = require(\"react-native-dynamic-style-processor\");\n\n\u003cText\n  style={[\n    _reactNativeDynamicStyleProcessor.process(styles).class1,\n    _reactNativeDynamicStyleProcessor.process(styles).class2\n  ]}\n/\u003e;\n```\n\n---\n\n...or with `className` and `style`:\n\n```jsx\n\u003cText\n  className={[styles.class1, styles.class2].join(\" \")}\n  style={{ color: \"blue\" }}\n/\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nvar _reactNativeDynamicStyleProcessor = require(\"react-native-dynamic-style-processor\");\n\n\u003cText\n  style={[\n    _reactNativeDynamicStyleProcessor.process(styles).class1,\n    _reactNativeDynamicStyleProcessor.process(styles).class2,\n    { color: \"blue\" }\n  ]}\n/\u003e;\n```\n\n#### Using template literal syntax\n\nExample:\n\n```jsx\n\u003cText className={`${styles.class1} ${styles.class2}`} /\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nvar _reactNativeDynamicStyleProcessor = require(\"react-native-dynamic-style-processor\");\n\n\u003cText\n  style={[\n    _reactNativeDynamicStyleProcessor.process(styles).class1,\n    _reactNativeDynamicStyleProcessor.process(styles).class2\n  ]}\n/\u003e;\n```\n\n---\n\n...or with `className` and `style`:\n\n```jsx\n\u003cText\n  className={`${styles.class1} ${styles.class2}`}\n  style={{ color: \"blue\" }}\n/\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nvar _reactNativeDynamicStyleProcessor = require(\"react-native-dynamic-style-processor\");\n\n\u003cText\n  style={[\n    _reactNativeDynamicStyleProcessor.process(styles).class1,\n    _reactNativeDynamicStyleProcessor.process(styles).class2,\n    { color: \"blue\" }\n  ]}\n/\u003e;\n```\n\n## Using ternary operator\n\nExample:\n\n```jsx\n\u003cText className={isTrue ? styles.class1 : styles.class2} /\u003e\n```\n\n↓ ↓ ↓ ↓ ↓ ↓\n\n```jsx\nvar _reactNativeDynamicStyleProcessor = require(\"react-native-dynamic-style-processor\");\n\n\u003cText\n  style={\n    isTrue\n      ? _reactNativeDynamicStyleProcessor.process(styles).class1\n      : _reactNativeDynamicStyleProcessor.process(styles).class2\n  }\n/\u003e;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristerkari%2Fbabel-plugin-react-native-classname-to-dynamic-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristerkari%2Fbabel-plugin-react-native-classname-to-dynamic-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristerkari%2Fbabel-plugin-react-native-classname-to-dynamic-style/lists"}