Novelty Polygonal Mathematics

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

    1.2.2 • Public • Published

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

    NPM version Build Status Build status Coverage Status Downloads per month PRs Welcome Greenkeeper badge

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

    Usage

    Step 1: Install

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

    or

    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:

    <Text className={styles.myClass} />

    ↓ ↓ ↓ ↓ ↓ ↓

    <Text style={styles.myClass} />

    ...or with className and style:

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

    ↓ ↓ ↓ ↓ ↓ ↓

    <Text style={[styles.myClass, { color: "blue" }]} />

    Multiple classes

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

    Example:

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

    ↓ ↓ ↓ ↓ ↓ ↓

    <Text style={[styles.class1, styles.class2]} />

    ...or with className and style:

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

    ↓ ↓ ↓ ↓ ↓ ↓

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

    Using template literal syntax

    Example:

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

    ↓ ↓ ↓ ↓ ↓ ↓

    <Text style={[styles.class1, styles.class2]} />

    ...or with className and style:

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

    ↓ ↓ ↓ ↓ ↓ ↓

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

    Using ternary operator

    Example:

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

    ↓ ↓ ↓ ↓ ↓ ↓

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

    Install

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

    DownloadsWeekly Downloads

    1,796

    Version

    1.2.2

    License

    MIT

    Unpacked Size

    10.4 kB

    Total Files

    5

    Last publish

    Collaborators

    • kristerkari