react-jump2source

A React library that enables quick navigation from the UI elements to the source code using your favourite IDE.

Installation

1npm install react-jump2source --save-dev

Setup

For Create React App Projects

1. Install CRACO:

1npm install @craco/craco --save-dev

2. Create a craco.config.js file in your project root:

1module.exports = {
2  babel: {
3    plugins: [
4      require('react-jump2source/babel')
5    ]
6  }
7};

3. Update your package.json scripts to use CRACO:

1{
2  "scripts": {
3    "start": "REACT_APP_J2S_WORKSPACE_ROOT=$(pwd) craco start",
4  }
5}

For Custom React Projects

Add the Babel plugin to your .babelrc or babel.config.js:

1{
2  "plugins": [
3    "react-jump2source/babel"
4  ]
5}

Usage

1import { initJ2S } from 'react-jump2source';
2
3function App() {
4  // Only initialize react-jump2source in development
5  useEffect(() => {
6    if (process.env.NODE_ENV === 'development') {
7      initJ2S({
8        projectDir: process.env.REACT_APP_WORKSPACE_ROOT, // inject using $(pwd) during dev server start (example above)
9        resolver: process.env.REACT_APP_J2S_RESOLVER || 'cursor'
10      });
11    }
12  }, []);
13
14  return (
15    // Your app components
16  );
17}

Configuration Options

• projectDir (required): Absolute path to your project's root directory. Example: /Users/John/repos/myReactApp
• enabled (optional): Whether the feature is enabled. Defaults to process.env.NODE_ENV === 'development'
• resolver (optional): How to generate the IDE URL. Can be:
  • 'cursor': Uses Cursor IDE format
  • 'vscode': Uses VS Code format
  • A custom function: (filePath: string) => string

Example of a custom resolver for using another IDEs (WebStorm, IntelliJ, etc.):

1initJ2S({
2  projectDir: process.env.REACT_APP_WORKSPACE_ROOT || '',
3  // The filePath argument will be in the format: components/MyComponent.tsx:32
4  // where the last number is the line number in the file
5  resolver: (filePath) => `anotherApp://openFile://${filePath}`
6});

Set the REACT_APP_WORKSPACE_ROOT environment variable to your project's root directory:

1REACT_APP_WORKSPACE_ROOT=/path/to/your/project

(optional) Use REACT_JUMP2SOURCE_IGNORE_PATHS environment variable to exclude certain file paths:

1REACT_JUMP2SOURCE_IGNORE_PATHS=src/components

Features

• Automatically adds data-source attributes to components in development mode
• Enables ctrl/cmd-click navigation from browser to your preferred IDE
• Supports multiple IDEs (Cursor, VS Code) with predefined resolvers
• Works with Create React App and custom React projects
• TypeScript support
• Zero impact in production builds

License

MIT