https://github.com/leegeunhyeok/react-native-devtools-standalone
Standalone React DevTools for integration with React Native
https://github.com/leegeunhyeok/react-native-devtools-standalone
react-devtools react-native
Last synced: 10 days ago
JSON representation
Standalone React DevTools for integration with React Native
- Host: GitHub
- URL: https://github.com/leegeunhyeok/react-native-devtools-standalone
- Owner: leegeunhyeok
- License: mit
- Created: 2024-03-02T06:36:53.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-11T06:28:30.000Z (10 months ago)
- Last Synced: 2025-04-13T01:18:53.399Z (20 days ago)
- Topics: react-devtools, react-native
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/react-native-devtools-standalone
- Size: 1.3 MB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-native-devtools-standalone
Standalone [react-devtools](https://github.com/facebook/react/tree/main/packages/react-devtools) for integration with React Native
You can also embed react-devtools in New Debugger!
## Architecture
```
┌────────────────────┐ ┌─────────────────────┐
│ Dev Server │ │ React Native │
│┌──────────────────┐│ │ │
││ (Proxy) ││ ┌────► react-devtools-core │
││ WebSocket Server ◄─────┘ │ (WebSocket) │
││ ▲ ││ └─────────────────────┘
││ │ ││ ┌─────────────────────────┐
││ ▼ ││ │ React DevTools Frontend │
││ WebSocket Server ◄─────┐ │ │
│└──────────────────┘│ └────► WebSocket Client │
└────────────────────┘ └─────────────────────────┘
```
## Installation
```bash
npm install react-native-devtools-standalone
# or
yarn add react-native-devtools-standalone
```
## Usage
### Backend
```ts
import * as http from 'node:http';
import { setupDevToolsProxy } from 'react-native-devtools-standalone/backend';
const server = http.createServer();
const config: DevToolsProxyConfig = /* */;
setupDevToolsProxy(config);
server.listen(...);
```
```ts
interface DevToolsProxyConfig {
/**
* Configurations for client(React Native).
*/
client?: {
/**
* Dev server host.
*/
host?: string;
/**
* `__REACT_DEVTOOLS_PORT__` value in React Native runtime.
*
* @see https://github.com/facebook/react-native/blob/v0.73.5/packages/react-native/Libraries/Core/setUpReactDevTools.js#L50-L53
*
* Defaults to `8097`
*/
port?: number;
/**
* WebSocket delegate
*/
delegate?: ProxyWebSocketDelegate;
};
/**
* Configurations for React DevTools.
*/
devtools?: {
/**
* Dev server host.
*
* Defaults to `'localhost'`
*/
host?: string;
/**
* Port for DevTools to connect.
*
* Defaults to `8098`
*/
port?: number;
/**
* WebSocket delegate
*/
delegate?: ProxyWebSocketDelegate;
};
}
```
### Frontend
```ts
import { setupDevTools } from 'react-native-devtools-standalone/frontend';
const config: DevToolsConfigs = {
element: document.getElementById('container'),
/* */
};
setupDevTools(config);
```
```ts
import type {
Config as DevtoolsStoreConfig,
DevtoolsProps,
} from 'react-devtools-inline/frontend';
interface DevToolsConfigs {
/**
* Element to render DevTools.
*/
element: HTMLElement;
/**
* Proxy web socket server host.
*
* Defaults to `'localhost'`
*/
host?: string;
/**
* Proxy web socket server port.
*
* Defaults to `8098`
*/
port?: number;
/**
* React DevTools store config.
*/
devtoolsStoreConfig?: DevtoolsStoreConfig;
/**
* React DevTools props.
*
* Defaults to `{ showTabBar: true, hideViewSourceAction: true }`
*/
devtoolsProps?: DevtoolsProps;
/**
* WebSocket delegate.
*/
delegate?: ProxyWebSocketDelegate;
}
```
## Development
```bash
# start dev server (http://localhost:3000/index.html)
yarn start
```
## License
[MIT](./LICENSE)