babel-plugin-react-element-info

> Babel plugin for exposing React element name and filename in DOM nodes



Installation

``sh
npm install --save-dev babel-plugin-react-element-info
`

The problem solved

This is useful for auto-generating selectors to run selenium tests.

Example

In

`myInputFile.js`
`js
class Foo extends React.Component {
render() {
return (

My component contents

);
}
}
`

Out
`js
class Foo extends React.Component {
render() {
return (

My component contents

);
}
}
`

Usage

#### Via .babelrc (Recommended)

.babelrc

without options:
`json
{
"env": {
"development": {
"plugins": [
"react-element-info"
]
}
}
}
`

with options. Prefix is the attribute prefix, defaulting to qa (data-qa-). To get data-test-prefix- attributes, set prefix to test-prefix:
`json
{
"env": {
"development": {
"plugins": [
["react-element-info", {"prefix": "test-prefix"}]
]
}
}
}
`

#### Via CLI

`sh
babel --plugins react-element-info script.js
`

#### Via Node API

without options:
`js
require('babel-core').transform('code', {
plugins: [
'react-element-info',
],
});
`

with options:
`js
require('babel-core').transform('code', {
plugins: [
['react-element-info', {prefix: 'text-prefix'}],
],
});
``

License

MIT