react-dev-inspector/lib/Inspector/Inspector.d.ts

dev-tool for inspect react components and jump to local IDE for component code.

import { type ReactNode } from 'react';
import type { Fiber } from 'react-reconciler';
import { type CodeInfo } from './utils';
/**
 * the inspect meta info that is sent to the callback when an element is hovered over or clicked.
 */
export interface InspectParams {
    /** hover / click event target dom element */
    element: HTMLElement;
    /** nearest named react component fiber for dom element */
    fiber?: Fiber;
    /** source file line / column / path info for react component */
    codeInfo?: CodeInfo;
    /** react component name for dom element */
    name?: string;
}
/**
 * `v2.0.0` changes:
 *   - make 'Ctrl + Shift + Alt + C' as default shortcut on Windows/Linux
 *   - export `defaultHotkeys`
 */
export declare const defaultHotkeys: () => string[];
export interface InspectorProps {
    /**
     * Inspector Component toggle hotkeys,
     *
     * supported keys see: https://github.com/jaywcjlove/hotkeys#supported-keys
     *
     * @default - `['Ctrl', 'Shift', 'Command', 'C']` on macOS, `['Ctrl', 'Shift', 'Alt', 'C']` on other platforms.
     *
     * Setting `keys={null}` explicitly means that disable use hotkeys to trigger it.
     */
    keys?: string[] | null;
    /**
     * If setting `active` prop, the Inspector will be a Controlled React Component,
     *   you need to control the `true`/`false` state to active the Inspector.
     *
     * If not setting `active` prop, this only a Uncontrolled component that
     *   will activate/deactivate by hotkeys.
     *
     * > add in version `v2.0.0`
     */
    active?: boolean;
    /**
     * Trigger by `active` state change, includes:
     * - hotkeys toggle, before activate/deactivate Inspector
     * - Escape / Click, before deactivate Inspector
     *
     * will NOT trigger by `active` prop change.
     *
     * > add in version `v2.0.0`
     */
    onActiveChange?: (active: boolean) => void;
    /**
     * Whether to disable all behavior include hotkeys listening or trigger,
     * will automatically disable in production environment by default.
     *
     * @default `true` if `NODE_ENV` is 'production', otherwise is `false`.
     * > add in version `v2.0.0`
     */
    disable?: boolean;
    /**
     * Callback when left-clicking on an element, with ensuring the source code info is found.
     *
     * By setting the `onInspectElement` prop, the default behavior ("open local IDE") will be disabled,
     *   that means you want to manually handle the source info, or handle how to goto editor by yourself.
     *
     * You can also use builtin `gotoServerEditor` utils in `onInspectElement` to get origin behavior ("open local IDE on server-side"),
     *   it looks like:
     *
     * ```tsx
     * import { Inspector, gotoServerEditor } from 'react-dev-inspector'
     *
     * <Inspector
     *   onInspectElement={({ codeInfo }) => {
     *     ...; // your processing
     *     gotoServerEditor(codeInfo)
     *   }}
     * </Inspector>
     * ```
     *
     * > add in version `v2.0.0`
     */
    onInspectElement?: (params: Required<InspectParams>) => void;
    /** Callback when hovering on an element */
    onHoverElement?: (params: InspectParams) => void;
    /**
     * Callback when left-clicking on an element.
     */
    onClickElement?: (params: InspectParams) => void;
    /** any children of react nodes */
    children?: ReactNode;
    /**
     * Whether to disable default behavior: "launch to local IDE when click on component".
     *
     * @default `true` if setting `onInspectElement` callback, otherwise is `false`.
     * @deprecated please use `onInspectElement` callback instead for fully custom controlling.
     */
    disableLaunchEditor?: boolean;
}
export declare const Inspector: (props: InspectorProps) => JSX.Element;