LocatorJS logo

Install Locator for React

Install Locator on React codebase. This is data-ids variant which is alternative solution for devtools variant.

1

Add Babel plugin

You need a babel plugin to gather all the component's locations in their files.
npm install -D @locator/babel-jsx
Add custom babel config to your Next.js project. Create of modifybabel.config.js file.
module.exports = {
  presets: ["next/babel"],
  plugins: [
    ["@locator/babel-jsx/dist", {
      env: "development",
    }]
  ]
};
If you are not using Babel, we offer alternative solution based on React DevTools.
2

Add UI library (optional for Browser Extension users)

Import and call setup function to show the components and handle the clickings.
npm install -D @locator/runtime
Add this to pages/_app.jsx (or other global file):
import setupLocatorUI from "@locator/runtime";

if (process.env.NODE_ENV === "development") {
  setupLocatorUI();
}
Alternatively to the 2nd step, you can install Browser Extension. If you are not ready to show the UI to your whole team, you can skip installing library. Browser extension will connect to apps that have Locator Babel Plugin installed.
3

Test and enjoy Locator

Go to your localhost environment.