GetClientRectsCase() — react Function Reference

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

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ GetClientRectsCase() — react Function Reference

Dependency Diagram

graph TD
  b51142e9_d732_8099_2df3_7f4c7837e108["GetClientRectsCase()"]
  c11d06f9_6e63_2442_30c7_d2c58390ccf3["GetClientRectsCase.js"]
  b51142e9_d732_8099_2df3_7f4c7837e108 -->|defined in| c11d06f9_6e63_2442_30c7_d2c58390ccf3
  style b51142e9_d732_8099_2df3_7f4c7837e108 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/GetClientRectsCase.js lines 7–54

export default function GetClientRectsCase() {
  return (
    <TestCase title="getClientRects">
      <TestCase.Steps>
        <li>
          Click the "Print Rects" button to get the client rects of the
          elements.
        </li>
      </TestCase.Steps>
      <TestCase.ExpectedResult>
        Calling getClientRects on the fragment instance will return a list of a
        DOMRectList for each child node.
      </TestCase.ExpectedResult>
      <Fixture>
        <Fixture.Controls>
          <PrintRectsFragmentContainer>
            <span
              style={{
                width: '300px',
                height: '250px',
                backgroundColor: 'lightblue',
                fontSize: 20,
                border: '1px solid black',
                marginBottom: '10px',
              }}>
              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
              eiusmod tempor incididunt ut labore et dolore magna aliqua.
            </span>
            <div
              style={{
                width: '150px',
                height: '100px',
                backgroundColor: 'lightgreen',
                border: '1px solid black',
              }}></div>
            <div
              style={{
                width: '500px',
                height: '50px',
                backgroundColor: 'lightpink',
                border: '1px solid black',
              }}></div>
          </PrintRectsFragmentContainer>
        </Fixture.Controls>
      </Fixture>
    </TestCase>
  );
}