bpr
babel-plugin-react-native-classname-to-dynamic-style
npm i babel-plugin-react-native-classname-to-dynamic-style
bpr

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.

by Krister Kari

0.22.0 (see all)License:MITTypeScript:Not Found
npm i babel-plugin-react-native-classname-to-dynamic-style
Readme

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

NPM version Build Status Build status Coverage Status Downloads per month Contributions welcome

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.

Usage

Step 1: Install

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

or

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:

<Text className={styles.myClass} />

↓ ↓ ↓ ↓ ↓ ↓

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

<Text style={_reactNativeDynamicStyleProcessor.process(styles).myClass} />;

...or with className and style:

<Text className={styles.myClass} style={{ color: "blue" }} />

↓ ↓ ↓ ↓ ↓ ↓

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

<Text
  style={[
    _reactNativeDynamicStyleProcessor.process(styles).myClass,
    { color: "blue" }
  ]}
/>;

Multiple classes

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

Example:

<Text className={[styles.class1, styles.class2].join(" ")} />

↓ ↓ ↓ ↓ ↓ ↓

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

<Text
  style={[
    _reactNativeDynamicStyleProcessor.process(styles).class1,
    _reactNativeDynamicStyleProcessor.process(styles).class2
  ]}
/>;

...or with className and style:

<Text
  className={[styles.class1, styles.class2].join(" ")}
  style={{ color: "blue" }}
/>

↓ ↓ ↓ ↓ ↓ ↓

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

<Text
  style={[
    _reactNativeDynamicStyleProcessor.process(styles).class1,
    _reactNativeDynamicStyleProcessor.process(styles).class2,
    { color: "blue" }
  ]}
/>;

Using template literal syntax

Example:

<Text className={`${styles.class1} ${styles.class2}`} />

↓ ↓ ↓ ↓ ↓ ↓

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

<Text
  style={[
    _reactNativeDynamicStyleProcessor.process(styles).class1,
    _reactNativeDynamicStyleProcessor.process(styles).class2
  ]}
/>;

...or with className and style:

<Text
  className={`${styles.class1} ${styles.class2}`}
  style={{ color: "blue" }}
/>

↓ ↓ ↓ ↓ ↓ ↓

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

<Text
  style={[
    _reactNativeDynamicStyleProcessor.process(styles).class1,
    _reactNativeDynamicStyleProcessor.process(styles).class2,
    { color: "blue" }
  ]}
/>;

Using ternary operator

Example:

<Text className={isTrue ? styles.class1 : styles.class2} />

↓ ↓ ↓ ↓ ↓ ↓

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

<Text
  style={
    isTrue
      ? _reactNativeDynamicStyleProcessor.process(styles).class1
      : _reactNativeDynamicStyleProcessor.process(styles).class2
  }
/>;

Downloads/wk

67

GitHub Stars

12

LAST COMMIT

1yr ago

MAINTAINERS

1

CONTRIBUTORS

2

OPEN ISSUES

0

OPEN PRs

4
VersionTagPublished
0.22.0
latest
3yrs ago
No alternatives found
No tutorials found
Add a tutorial