babel-plugin-component-name-as-jsx-prop

Add property to render with component name

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
babel-plugin-component-name-as-jsx-prop
0.0.54 years ago5 years agoMinified + gzip package size for babel-plugin-component-name-as-jsx-prop in KB

Readme

babel-plugin-component-name-as-jsx-prop
Add a description for the plugin here

Example

In
import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div someOtherAttribute/>;
  }
}


function Example() {
  return (
    <div>
      <p />
    </div>
  );
}

const Example = () => {
  return <div />;
};

Out
import React, { Component } from 'react';

class MyComponent extends Component {
  render() {
    return <div data-name="MyComponent" someOtherAttribute />;
  }
}

function Example() {
  return <div data-name="Example">
      <p />
    </div>;
}

const Example = () => {
  return <div data-name="Example" />;
};

Installation

$ npm install babel-plugin-component-name-as-jsx-prop

Usage

Via .babelrc (Recommended)

.babelrc
{
  "plugins": ["component-name-as-jsx-prop"]
}

Via CLI

$ babel --plugins component-name-as-jsx-prop script.js

Via Node API

require("babel-core").transform("code", {
  plugins: ["component-name-as-jsx-prop"]
});

Credits

Boilerplate and some code is from those 2 plugins:
  • https://github.com/layershifter/babel-plugin-transform-react-handled-props
  • https://github.com/alanbsmith/babel-plugin-react-add-property

License

MIT