GeneralSettings() — react Function Reference

Architecture documentation for the GeneralSettings() function in GeneralSettings.js from the react codebase.

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ GeneralSettings() — react Function Reference

Dependency Diagram

graph TD
  97a5705e_2739_9ff5_e96e_36e4367e38ad["GeneralSettings()"]
  ba1321bc_42b8_c6c2_e944_8928bf07c59a["GeneralSettings.js"]
  97a5705e_2739_9ff5_e96e_36e4367e38ad -->|defined in| ba1321bc_42b8_c6c2_e944_8928bf07c59a
  style 97a5705e_2739_9ff5_e96e_36e4367e38ad fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shared/src/devtools/views/Settings/GeneralSettings.js lines 37–148

export default function GeneralSettings(_: {}): React.Node {
  const {
    displayDensity,
    setDisplayDensity,
    setTheme,
    setTraceUpdatesEnabled,
    theme,
    traceUpdatesEnabled,
  } = useContext(SettingsContext);

  const {backendVersion, supportsTraceUpdates} = useContext(StoreContext);
  const frontendVersion = process.env.DEVTOOLS_VERSION;

  const showBackendVersion =
    backendVersion && backendVersion !== frontendVersion;

  const [alwaysOpenInEditor] = useLocalStorage<boolean>(
    LOCAL_STORAGE_ALWAYS_OPEN_IN_EDITOR,
    false,
  );

  return (
    <div className={styles.SettingList}>
      {isInternalFacebookBuild && (
        <div className={styles.SettingWrapper}>
          This is an internal build of React DevTools for Meta
        </div>
      )}

      <div className={styles.SettingWrapper}>
        <div className={styles.RadioLabel}>Theme</div>
        <select
          value={theme}
          onChange={({currentTarget}) => setTheme(currentTarget.value)}>
          <option value="auto">Auto</option>
          <option value="light">Light</option>
          <option value="dark">Dark</option>
        </select>
      </div>

      <div className={styles.SettingWrapper}>
        <div className={styles.RadioLabel}>Display density</div>
        <select
          value={displayDensity}
          onChange={({currentTarget}) =>
            setDisplayDensity(currentTarget.value)
          }>
          <option value="compact">Compact</option>
          <option value="comfortable">Comfortable</option>
        </select>
      </div>

      <div className={styles.SettingWrapper}>
        <label className={styles.SettingRow}>
          <div className={styles.RadioLabel}>Open in Editor URL</div>
          <CodeEditorOptions />
        </label>
      </div>

      <div className={styles.SettingWrapper}>
        <CodeEditorByDefault />
        {alwaysOpenInEditor && (__IS_CHROME__ || __IS_EDGE__) ? (
          <div>
            To enable link handling in your browser's DevTools settings, look
            for the option Extension -> Link Handling. Select "React Developer
            Tools".
          </div>
        ) : null}
      </div>

      {supportsTraceUpdates && (
        <div className={styles.SettingWrapper}>
          <label className={styles.SettingRow}>
            <input
              type="checkbox"
              checked={traceUpdatesEnabled}
              onChange={({currentTarget}) =>
                setTraceUpdatesEnabled(currentTarget.checked)
              }
              className={styles.SettingRowCheckbox}
            />