babel-plugin-transform-react-jsx-self

babel-plugin-transform-react-jsx-self

Adds __self prop to JSX elements, which React will use to generate some runtime warnings. All React users should enable this transform in dev mode.

Example

In

<sometag />

Out

<sometag __self={this} />

Installation

npm install --save-dev babel-plugin-transform-react-jsx-self

Usage

Via .babelrc (Recommended)

.babelrc

{
  "plugins": ["transform-react-jsx-self"]
}

Via CLI

babel --plugins transform-react-jsx-self script.js

Via Node API

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

Similar packages

Other packages similar to babel-plugin-transform-react-jsx-self

babel-plugin-transform-react-jsx-source

The babel-plugin-transform-react-jsx-source package is another Babel plugin that adds a `__source` prop to all JSX elements. This `__source` prop contains information about the filename and line number of the JSX element, which can be useful for debugging. Unlike babel-plugin-transform-react-jsx-self, which adds a `__self` prop, this plugin focuses on providing source location information.

babel-plugin-react-display-name

The babel-plugin-react-display-name package automatically adds a `displayName` property to React component classes. This can be useful for debugging and development tools, as it makes it easier to identify components in the React component tree. While it does not add a `__self` prop like babel-plugin-transform-react-jsx-self, it serves a similar purpose of improving the developer experience by making components easier to identify.