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

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.
https://github.com/kristerkari/babel-plugin-react-native-classname-to-dynamic-style

babel babel-plugin classname dynamic react-native style transform

Last synced: about 2 months ago
JSON representation

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.

• Host: GitHub
• URL: https://github.com/kristerkari/babel-plugin-react-native-classname-to-dynamic-style
• Owner: kristerkari
• License: mit
• Created: 2018-03-25T21:14:49.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2022-12-07T17:53:46.000Z (about 2 years ago)
• Last Synced: 2024-08-06T10:13:09.344Z (5 months ago)
• Topics: babel, babel-plugin, classname, dynamic, react-native, style, transform
• Language: JavaScript
• Homepage:
• Size: 438 KB
• Stars: 13
• Watchers: 3
• Forks: 7
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

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

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

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

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

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

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

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

Transform 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.

## Usage

### Step 1: Install

```sh

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

```

or

```sh

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

```

### Step 2: Configure `.babelrc`

```

{

  "presets": [

    "react-native"

  ],

  "plugins": [

    "react-native-classname-to-dynamic-style"

  ]

}

```

## Syntax

## Single class

Example:

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");

;

```

---

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

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");

;

```

## Multiple classes

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

Example:

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");

;

```

---

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

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");

;

```

#### Using template literal syntax

Example:

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");

;

```

---

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

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");

;

```

## Using ternary operator

Example:

```jsx

```

↓ ↓ ↓ ↓ ↓ ↓

```jsx

var _reactNativeDynamicStyleProcessor = require("react-native-dynamic-style-processor");

;

```