Component() — react Function Reference

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

Function javascript BabelCompiler Optimization

Entity Profile

BabelCompiler→ Optimization→ Component() — react Function Reference

Dependency Diagram

graph TD
  22d455e8_2d48_8c57_1a13_12b9513a4d5e["Component()"]
  ef975ced_d6a7_b295_dbfc_38e701d92f78["Page.js"]
  22d455e8_2d48_8c57_1a13_12b9513a4d5e -->|defined in| ef975ced_d6a7_b295_dbfc_38e701d92f78
  style 22d455e8_2d48_8c57_1a13_12b9513a4d5e fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/view-transition/src/components/Page.js lines 44–80

function Component() {
  // Test inserting fonts with style tags using useInsertionEffect. This is not recommended but
  // used to test that gestures etc works with useInsertionEffect so that stylesheet based
  // libraries can be properly supported.
  useInsertionEffect(() => {
    const style = document.createElement('style');
    style.textContent = `
      .roboto-font {
        font-family: "Roboto", serif;
        font-optical-sizing: auto;
        font-weight: 100;
        font-style: normal;
        font-variation-settings:
          "wdth" 100;
      }
    `;
    document.head.appendChild(style);
    return () => {
      document.head.removeChild(style);
    };
  }, []);
  return (
    <ViewTransition
      default={
        transitions['enter-slide-right'] + ' ' + transitions['exit-slide-left']
      }>
      <p className="roboto-font">Slide In from Left, Slide Out to Right</p>
      <p>
        <img
          src="https://react.dev/_next/image?url=%2Fimages%2Fteam%2Fsebmarkbage.jpg&w=3840&q=75"
          width="400"
          height="248"
        />
      </p>
    </ViewTransition>
  );
}