Install Locator for React

Install Locator on React codebase. This is DevTools variant which is preffered solution. Alternative is data-id solution.

Both browser extension and library require either working devtools with sources or Locator's Babel plugin.

Browser extension (option A)

Easiest way to start with Locator is to install a Browser Extension
You can get extension for Chrome, Edge, Brave, Opera, Firefox

Library (option B)

If you would like to install Locator to your project, so all team members can use it. You can install it as a library.

npm
Yarn
pnpm

npm install -D @locator/runtime

Next.js
Create React App
Vite
Storybook
Others

Add this to pages/_app.jsx (or other global file):

import setupLocatorUI from "@locator/runtime";

if (process.env.NODE_ENV === "development") {
  setupLocatorUI();
}

Troubleshooting

Locator should work automatically in dev mode in most modern stacks. They automatically include babel-preset-react which includes babel-plugin-transform-react-jsx-source
Non-babel stacks use similar alternatives.

If you don't have babel-plugin-transform-react-jsx-source you should set it up manually.

tl;dr Adding this to your Babel config might help:

{
  "presets": ["@babel/preset-react"],
  "plugins": [
    "@babel/plugin-transform-react-jsx-self",
    "@babel/plugin-transform-react-jsx-source"
  ]
}

Or try alternative: installation based on custom Babel plugin