You can pass Alt and Click/RightClick a component in this website to try open code in GitHub.

Setup

This guide covers the setup of Click To Component of React.

Note:

  • You can skip setp 1 and 2 when your are using react < 19 (next < 14.1.1) and @babel/preset-react < 7.12.10.
  • If you are using react < 19 (next < 14.1.1) you can using @babel/plugin-transform-react-jsx-source.
  • If you are using @babel/preset-react < 7.12.10 the @babel/plugin-transform-react-jsx-source is already installed and enabled in your project.
1

Installation

npm install --save-dev babel-plugin-transform-react-jsx-data-source-code-location
2

Usage

Important:

Do not enable babel-plugin-transform-react-jsx-data-source-code-location in product enviroument.

+const plugins = [];

+if (process.env.NODE_ENV === "development") {
+  plugins.push("babel-plugin-transform-react-jsx-data-source-code-location");
+}

module.exports = {
  presets: [],
+  plugins,
};

Or

module.exports = {
  presets: [],
+  plugins: [process.env.NODE_ENV === "development" && "babel-plugin-transform-react-jsx-data-source-code-location"].filter(Boolean),
};
3

Click To Component

You can using browser extension to start click to component.

If you want to start click to component without browser extension, you can using browser script.