DialogComponent() — react Function Reference

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

Function javascript BabelCompiler Validation

Entity Profile

BabelCompiler→ Validation→ DialogComponent() — react Function Reference

Dependency Diagram

graph TD
  996311e8_e7c9_4af1_1283_28e84b28028a["DialogComponent()"]
  5aa85a12_1605_0a07_5475_5af04b0334ac["index.js"]
  996311e8_e7c9_4af1_1283_28e84b28028a -->|defined in| 5aa85a12_1605_0a07_5475_5af04b0334ac
  style 996311e8_e7c9_4af1_1283_28e84b28028a fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-devtools-shell/src/app/TraceUpdatesTest/index.js lines 24–49

function DialogComponent() {
  const dialogRef = useRef(null);

  const openDialog = () => {
    if (dialogRef.current) {
      dialogRef.current.showModal();
    }
  };

  const closeDialog = () => {
    if (dialogRef.current) {
      dialogRef.current.close();
    }
  };

  return (
    <div style={{margin: '10px 0'}}>
      <button onClick={openDialog}>Open Dialog</button>
      <dialog ref={dialogRef} style={{padding: '20px'}}>
        <h3>Dialog Content</h3>
        <Counter />
        <button onClick={closeDialog}>Close</button>
      </dialog>
    </div>
  );
}