react Architecture Docs
Home / File/ InspectedElementBadges.js — react Source File

InspectedElementBadges.js — react Source File

Architecture documentation for InspectedElementBadges.js, a javascript file in the react codebase. 8 imports, 3 dependents.

File javascript BabelCompiler Validation 8 imports 3 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  d5989364_e16c_e349_6082_7c3e50da7772["InspectedElementBadges.js"]
  756a0539_706c_4343_7c04_e05126473386["Badge.js"]
  d5989364_e16c_e349_6082_7c3e50da7772 --> 756a0539_706c_4343_7c04_e05126473386
  499262a9_8ff7_54b8_b4bd_df5d9dabe69c["Badge"]
  d5989364_e16c_e349_6082_7c3e50da7772 --> 499262a9_8ff7_54b8_b4bd_df5d9dabe69c
  7f77861c_2ca5_7fd9_4b5c_fa236449c0d3["ForgetBadge.js"]
  d5989364_e16c_e349_6082_7c3e50da7772 --> 7f77861c_2ca5_7fd9_4b5c_fa236449c0d3
  b932b590_2fc4_98e1_6681_8740b8db7390["ForgetBadge"]
  d5989364_e16c_e349_6082_7c3e50da7772 --> b932b590_2fc4_98e1_6681_8740b8db7390
  251d0278_265f_3231_0317_9eb1351197ae["NativeTagBadge.js"]
  d5989364_e16c_e349_6082_7c3e50da7772 --> 251d0278_265f_3231_0317_9eb1351197ae
  f99b22fb_2260_f6b5_0d47_08995382d0e8["NativeTagBadge"]
  d5989364_e16c_e349_6082_7c3e50da7772 --> f99b22fb_2260_f6b5_0d47_08995382d0e8
  756e100a_e9e2_ad5c_dd26_707aea79c4b2["InspectedElementBadges.css"]
  d5989364_e16c_e349_6082_7c3e50da7772 --> 756e100a_e9e2_ad5c_dd26_707aea79c4b2
  ac587885_e294_a1e9_b13f_5e7b920fdb42["react"]
  d5989364_e16c_e349_6082_7c3e50da7772 --> ac587885_e294_a1e9_b13f_5e7b920fdb42
  d09ae4bb_9ed0_3257_c11b_1c199408288d["InspectedElementView.js"]
  d09ae4bb_9ed0_3257_c11b_1c199408288d --> d5989364_e16c_e349_6082_7c3e50da7772
  38d38257_86b3_3154_4c21_7fbaf41be1cb["HoveredFiberInfo.js"]
  38d38257_86b3_3154_4c21_7fbaf41be1cb --> d5989364_e16c_e349_6082_7c3e50da7772
  05d8745f_e91f_f824_2d34_e3be3fd76a6c["SidebarSelectedFiberInfo.js"]
  05d8745f_e91f_f824_2d34_e3be3fd76a6c --> d5989364_e16c_e349_6082_7c3e50da7772
  style d5989364_e16c_e349_6082_7c3e50da7772 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 * @flow
 */

import * as React from 'react';

import Badge from './Badge';
import ForgetBadge from './ForgetBadge';
import NativeTagBadge from './NativeTagBadge';

import styles from './InspectedElementBadges.css';

type Props = {
  hocDisplayNames: null | Array<string>,
  compiledWithForget: boolean,
  nativeTag: number | null,
};

export default function InspectedElementBadges({
  hocDisplayNames,
  compiledWithForget,
  nativeTag,
}: Props): React.Node {
  if (
    !compiledWithForget &&
    (hocDisplayNames == null || hocDisplayNames.length === 0) &&
    nativeTag === null
  ) {
    return null;
  }

  return (
    <div className={styles.Root}>
      {compiledWithForget && <ForgetBadge indexable={false} />}
      {nativeTag !== null && <NativeTagBadge nativeTag={nativeTag} />}

      {hocDisplayNames !== null &&
        hocDisplayNames.map(hocDisplayName => (
          <Badge key={hocDisplayName}>{hocDisplayName}</Badge>
        ))}
    </div>
  );
}

Domain

Subdomains

Functions

Dependencies

Imported By

Source

Frequently Asked Questions

What does InspectedElementBadges.js do?
InspectedElementBadges.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Validation subdomain.
What functions are defined in InspectedElementBadges.js?
InspectedElementBadges.js defines 1 function(s): InspectedElementBadges.
What does InspectedElementBadges.js depend on?
InspectedElementBadges.js imports 8 module(s): Badge, Badge.js, ForgetBadge, ForgetBadge.js, InspectedElementBadges.css, NativeTagBadge, NativeTagBadge.js, react.
What files import InspectedElementBadges.js?
InspectedElementBadges.js is imported by 3 file(s): HoveredFiberInfo.js, InspectedElementView.js, SidebarSelectedFiberInfo.js.
Where is InspectedElementBadges.js in the architecture?
InspectedElementBadges.js is located at packages/react-devtools-shared/src/devtools/views/Components/InspectedElementBadges.js (domain: BabelCompiler, subdomain: Validation, directory: packages/react-devtools-shared/src/devtools/views/Components).

Analyze Your Own Codebase

Get architecture documentation, dependency graphs, and domain analysis for your codebase in minutes.

Try Supermodel Free