Page() — react Function Reference

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

Function javascript BabelCompiler Entrypoint calls 1

Entity Profile

BabelCompiler→ Entrypoint→ Page() — react Function Reference

Dependency Diagram

graph TD
  68b973bf_9634_6694_b5b6_773e48d34fe6["Page()"]
  ef975ced_d6a7_b295_dbfc_38e701d92f78["Page.js"]
  68b973bf_9634_6694_b5b6_773e48d34fe6 -->|defined in| ef975ced_d6a7_b295_dbfc_38e701d92f78
  50a58e58_16b2_e1b9_a514_3c76f6c5f9f8["sleep()"]
  68b973bf_9634_6694_b5b6_773e48d34fe6 -->|calls| 50a58e58_16b2_e1b9_a514_3c76f6c5f9f8
  style 68b973bf_9634_6694_b5b6_773e48d34fe6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/view-transition/src/components/Page.js lines 93–327

export default function Page({url, navigate}) {
  const [renderedUrl, optimisticNavigate] = useOptimistic(
    url,
    (state, direction) => {
      return direction === 'left' ? '/?a' : '/?b';
    }
  );
  const show = renderedUrl === '/?b';
  function onTransition(viewTransition, types) {
    const keyframes = [
      {rotate: '0deg', transformOrigin: '30px 8px'},
      {rotate: '360deg', transformOrigin: '30px 8px'},
    ];
    const animation1 = viewTransition.old.animate(keyframes, 250);
    const animation2 = viewTransition.new.animate(keyframes, 250);
    return () => {
      animation1.cancel();
      animation2.cancel();
    };
  }

  function onGestureTransition(
    timeline,
    {rangeStart, rangeEnd},
    viewTransition,
    types
  ) {
    const keyframes = [
      {rotate: '0deg', transformOrigin: '30px 8px'},
      {rotate: '360deg', transformOrigin: '30px 8px'},
    ];
    const reverse = rangeStart > rangeEnd;
    if (timeline instanceof AnimationTimeline) {
      // Native Timeline
      const options = {
        timeline: timeline,
        direction: reverse ? 'normal' : 'reverse',
        rangeStart: (reverse ? rangeEnd : rangeStart) + '%',
        rangeEnd: (reverse ? rangeStart : rangeEnd) + '%',
      };
      const animation1 = viewTransition.old.animate(keyframes, options);
      const animation2 = viewTransition.new.animate(keyframes, options);
      return () => {
        animation1.cancel();
        animation2.cancel();
      };
    } else {
      // Custom Timeline
      const options = {
        direction: reverse ? 'normal' : 'reverse',
        // We set the delay and duration to represent the span of the range.
        delay: reverse ? rangeEnd : rangeStart,
        duration: reverse ? rangeStart - rangeEnd : rangeEnd - rangeStart,
      };
      const animation1 = viewTransition.old.animate(keyframes, options);
      const animation2 = viewTransition.new.animate(keyframes, options);
      // Let the custom timeline take control of driving the animations.
      const cleanup1 = timeline.animate(animation1);
      const cleanup2 = timeline.animate(animation2);
      return () => {
        animation1.cancel();
        animation2.cancel();
        cleanup1();
        cleanup2();
      };
    }
  }

  function swipeAction() {
    navigate(show ? '/?a' : '/?b');
  }

  const [counter, setCounter] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => setCounter(c => c + 1), 1000);
    return () => clearInterval(timer);
  }, []);

  useLayoutEffect(() => {
    // Calling a default update should not interrupt ViewTransitions but