babel-plugin-transform-jsx-m

Support m with directive. eg: m-style={}

Example

In

import { createElement } from 'react';

export default function Foo(props) {
  const { message } = props;
  return (
    <div m-style={padding:'0px'} style={padding: '20px'}>hello world</div>
  );
}

Out

import { createElement } from 'react';
// PC
export default function Foo(props) {
  const { message } = props;
  return (
    <div style={padding: '20px'}>hello world</div>
  );
}


// Mobile
export default function Foo(props) {
  const { message } = props;
  return (
    <div style={padding: '0px'}>hello world</div>
  );
}

Installation

$ npm install babel-plugin-transform-jsx-m

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-jsx-m"]
}

Via CLI

$ babel --plugins transform-jsx-m script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["transform-jsx-m"]
});