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