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

    0.22.0 • Public • Published

    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
      }
    />;

    Install

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

    DownloadsWeekly Downloads

    49

    Version

    0.22.0

    License

    MIT

    Unpacked Size

    15.4 kB

    Total Files

    4

    Last publish

    Collaborators

    • kristerkari