babel-plugin-transform-jsx-namespace-to-ref

Example

In

class MyComponent extends React.Component {
  render() {
    return <myDiv:div />
  }
}

Out

class MyComponent extends React.Component {
  render() {
    return <div ref={myDiv => this.myDiv = myDiv} />;
  }
}

Installation

npm install --save-dev babel-plugin-transform-jsx-namespace-to-ref

Usage

Examples for plugin options

asThisProperty option

The default option (not necessary)

To specify the path for element

.babelrc

{
  "plugins": [[
    "transform-jsx-namespace-to-ref", {
      "refType": "asThisProperty",
      "path": "property"
    }
  ]]
}

In

class MyComponent extends React.Component {
  render() {
    return <myDiv:div />
  }
}

Out

class MyComponent extends React.Component {
  render() {
    return <div ref={myDiv => this.property.myDiv = myDiv} />;
  }
}

asThisMethod option

.babelrc

{
  "plugins": [[
    "transform-jsx-namespace-to-ref", {
      "refType": "asThisMethod",
      "path": "methodName"
    }
  ]]
}

In

class MyComponent extends React.Component {
  render() {
    return <myDiv:div />
  }
}

Out

class MyComponent extends React.Component {
  render() {
    return <div ref={myDiv => this.methodName("myDiv", myDiv)} />;
  }
}

legacy option

.babelrc

{
  "plugins": [[
    "transform-jsx-namespace-to-ref", {
      "refType": "legacy"
    }
  ]]
}

In

class MyComponent extends React.Component {
  render() {
    return <myDiv:div />
  }
}

Out

class MyComponent extends React.Component {
  render() {
    return <div ref="myDiv" />;
  }
}