https://github.com/kristerkari/babel-plugin-react-native-classname-to-style

Transform JSX className property to style property in react-native.
https://github.com/kristerkari/babel-plugin-react-native-classname-to-style

babel babel-plugin classname react-native style

Last synced: about 1 year ago
JSON representation

Transform JSX className property to style property in react-native.

• Host: GitHub
• URL: https://github.com/kristerkari/babel-plugin-react-native-classname-to-style
• Owner: kristerkari
• License: mit
• Created: 2018-01-09T22:00:10.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2023-04-11T00:00:55.000Z (about 3 years ago)
• Last Synced: 2025-03-19T09:13:47.008Z (over 1 year ago)
• Topics: babel, babel-plugin, classname, react-native, style
• Language: JavaScript
• Size: 2.31 MB
• Stars: 13
• Watchers: 2
• Forks: 2
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# babel-plugin-react-native-classname-to-style

[![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)

[![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)

[![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)

[![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)

[![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)

[![Greenkeeper badge](https://badges.greenkeeper.io/kristerkari/babel-plugin-react-native-classname-to-style.svg)](https://greenkeeper.io/)

Transform JSX `className` property to `style` property in react-native.

## Usage

### Step 1: Install

```sh

yarn add --dev babel-plugin-react-native-classname-to-style

```

or

```sh

npm install --save-dev babel-plugin-react-native-classname-to-style

```

### Step 2: Configure `.babelrc`

```

{

  "presets": [

    "react-native"

  ],

  "plugins": [

    "react-native-classname-to-style"

  ]

}

```

## Syntax

## Single class

Example:

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

```

---

...or with `className` and `style`:

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

```

## Multiple classes

#### Using `[styles.class1, styles.class2].join(" ")` syntax

Example:

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

```

---

...or with `className` and `style`:

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

```

#### Using template literal syntax

Example:

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

```

---

...or with `className` and `style`:

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

```

## Using ternary operator

Example:

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

```