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

PrintRectsFragmentContainer.js — react Source File

Architecture documentation for PrintRectsFragmentContainer.js, a javascript file in the react codebase. 0 imports, 2 dependents.

File javascript BabelCompiler Optimization 2 dependents 1 functions

Entity Profile

Dependency Diagram

graph LR
  e1fc4cb7_9af0_fc19_09e0_092ad843fb85["PrintRectsFragmentContainer.js"]
  c11d06f9_6e63_2442_30c7_d2c58390ccf3["GetClientRectsCase.js"]
  c11d06f9_6e63_2442_30c7_d2c58390ccf3 --> e1fc4cb7_9af0_fc19_09e0_092ad843fb85
  f361f511_643d_fef8_84d3_4e38e9129616["TextNodesCase.js"]
  f361f511_643d_fef8_84d3_4e38e9129616 --> e1fc4cb7_9af0_fc19_09e0_092ad843fb85
  style e1fc4cb7_9af0_fc19_09e0_092ad843fb85 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

const React = window.React;
const {Fragment, useRef, useState} = React;

const colors = [
  '#e74c3c',
  '#3498db',
  '#2ecc71',
  '#9b59b6',
  '#f39c12',
  '#1abc9c',
];

export default function PrintRectsFragmentContainer({children}) {
  const fragmentRef = useRef(null);
  const [rects, setRects] = useState([]);

  const getRects = () => {
    const rectsResult = fragmentRef.current.getClientRects();
    setRects(Array.from(rectsResult));
  };

  const getColor = index => colors[index % colors.length];

  return (
    <Fragment>
      <div style={{marginBottom: '16px'}}>
        <button
          onClick={getRects}
          style={{
            padding: '8px 16px',
            fontSize: '14px',
            fontWeight: 'bold',
            cursor: 'pointer',
          }}>
          Print Rects
        </button>
        {rects.length > 0 && (
          <span style={{marginLeft: '12px', color: '#666'}}>
            Found {rects.length} rect{rects.length !== 1 ? 's' : ''}
          </span>
        )}
      </div>

      <div style={{display: 'flex', gap: '20px', marginBottom: '16px'}}>
        <div
          style={{
            position: 'relative',
            width: '30vw',
            height: '30vh',
            border: '1px solid #ccc',
            backgroundColor: '#fafafa',
            borderRadius: '4px',
            overflow: 'hidden',
          }}>
          {rects.length === 0 && (
            <div
              style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
// ... (67 more lines)

Domain

Subdomains

Functions

Imported By

Source

Frequently Asked Questions

What does PrintRectsFragmentContainer.js do?
PrintRectsFragmentContainer.js is a source file in the react codebase, written in javascript. It belongs to the BabelCompiler domain, Optimization subdomain.
What functions are defined in PrintRectsFragmentContainer.js?
PrintRectsFragmentContainer.js defines 1 function(s): PrintRectsFragmentContainer.
What files import PrintRectsFragmentContainer.js?
PrintRectsFragmentContainer.js is imported by 2 file(s): GetClientRectsCase.js, TextNodesCase.js.
Where is PrintRectsFragmentContainer.js in the architecture?
PrintRectsFragmentContainer.js is located at fixtures/dom/src/components/fixtures/fragment-refs/PrintRectsFragmentContainer.js (domain: BabelCompiler, subdomain: Optimization, directory: fixtures/dom/src/components/fixtures/fragment-refs).

Analyze Your Own Codebase

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

Try Supermodel Free