{"id":17963349,"url":"https://github.com/kristerkari/babel-plugin-react-native-classname-to-style","last_synced_at":"2025-03-25T05:32:15.533Z","repository":{"id":28245095,"uuid":"116875680","full_name":"kristerkari/babel-plugin-react-native-classname-to-style","owner":"kristerkari","description":"Transform JSX className property to style property in react-native.","archived":false,"fork":false,"pushed_at":"2023-04-11T00:00:55.000Z","size":2423,"stargazers_count":13,"open_issues_count":7,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-19T09:13:47.008Z","etag":null,"topics":["babel","babel-plugin","classname","react-native","style"],"latest_commit_sha":null,"homepage":null,"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":"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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-01-09T22:00:10.000Z","updated_at":"2025-01-15T03:50:13.000Z","dependencies_parsed_at":"2024-06-18T20:08:27.580Z","dependency_job_id":"a19deb7b-97d8-4125-ac90-8d43fa4ee2ae","html_url":"https://github.com/kristerkari/babel-plugin-react-native-classname-to-style","commit_stats":{"total_commits":78,"total_committers":4,"mean_commits":19.5,"dds":0.2435897435897436,"last_synced_commit":"fa423db23418aeee0237b859d39321f342ad4194"},"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Fbabel-plugin-react-native-classname-to-style","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Fbabel-plugin-react-native-classname-to-style/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Fbabel-plugin-react-native-classname-to-style/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristerkari%2Fbabel-plugin-react-native-classname-to-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-style/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245407584,"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","react-native","style"],"created_at":"2024-10-29T11:34:44.601Z","updated_at":"2025-03-25T05:32:15.134Z","avatar_url":"https://github.com/kristerkari.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# babel-plugin-react-native-classname-to-style\n\n[![NPM version](http://img.shields.io/npm/v/babel-plugin-react-native-classname-to-style.svg)](https://www.npmjs.org/package/babel-plugin-react-native-classname-to-style)\n[![Build Status](https://travis-ci.org/kristerkari/babel-plugin-react-native-classname-to-style.svg?branch=master)](https://travis-ci.org/kristerkari/babel-plugin-react-native-classname-to-style) [![Build status](https://ci.appveyor.com/api/projects/status/t36rxodjhk72hl9i/branch/master?svg=true)](https://ci.appveyor.com/project/kristerkari/babel-plugin-react-native-classname-to-style/branch/master)\n[![Coverage Status](https://coveralls.io/repos/github/kristerkari/babel-plugin-react-native-classname-to-style/badge.svg?branch=master)](https://coveralls.io/github/kristerkari/babel-plugin-react-native-classname-to-style?branch=master)\n[![Downloads per month](https://img.shields.io/npm/dm/babel-plugin-react-native-classname-to-style.svg)](http://npmcharts.com/compare/babel-plugin-react-native-classname-to-style?periodLength=30)\n[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://egghead.io/courses/how-to-contribute-to-an-open-source-project-on-github)\n[![Greenkeeper badge](https://badges.greenkeeper.io/kristerkari/babel-plugin-react-native-classname-to-style.svg)](https://greenkeeper.io/)\n\nTransform JSX `className` property to `style` property in react-native.\n\n## Usage\n\n### Step 1: Install\n\n```sh\nyarn add --dev babel-plugin-react-native-classname-to-style\n```\n\nor\n\n```sh\nnpm install --save-dev babel-plugin-react-native-classname-to-style\n```\n\n### Step 2: Configure `.babelrc`\n\n```\n{\n  \"presets\": [\n    \"react-native\"\n  ],\n  \"plugins\": [\n    \"react-native-classname-to-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\n\u003cText style={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\n\u003cText style={[styles.myClass, { color: \"blue\" }]} /\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\n\u003cText style={[styles.class1, styles.class2]} /\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\n\u003cText style={[styles.class1, styles.class2, { color: \"blue\" }]} /\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\n\u003cText style={[styles.class1, styles.class2]} /\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\n\u003cText style={[styles.class1, styles.class2, { color: \"blue\" }]} /\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\n\u003cText style={isTrue ? styles.class1 : styles.class2} /\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristerkari%2Fbabel-plugin-react-native-classname-to-style","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristerkari%2Fbabel-plugin-react-native-classname-to-style","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristerkari%2Fbabel-plugin-react-native-classname-to-style/lists"}