IntersectionObserverCase() — react Function Reference

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/IntersectionObserverCase.js lines 25–155

export default function IntersectionObserverCase() {
  const fragmentRef = useRef(null);
  const [items, setItems] = useState(initialItems);
  const addedItems = items.slice(3);
  const anyOnScreen = items.some(([, onScreen]) => onScreen);
  const observerRef = useRef(null);

  useEffect(() => {
    if (observerRef.current === null) {
      observerRef.current = new IntersectionObserver(
        entries => {
          setItems(prev => {
            const newItems = [...prev];
            entries.forEach(entry => {
              const index = newItems.findIndex(
                ([id]) => id === entry.target.id
              );
              newItems[index] = [entry.target.id, entry.isIntersecting];
            });
            return newItems;
          });
        },
        {
          threshold: [0.5],
        }
      );
    }
    fragmentRef.current.observeUsing(observerRef.current);

    const lastFragmentRefValue = fragmentRef.current;
    return () => {
      lastFragmentRefValue.unobserveUsing(observerRef.current);
      observerRef.current = null;
    };
  }, []);

  return (
    <TestCase title="Intersection Observer">
      <TestCase.Steps>
        <li>
          Scroll the children into view, observe the sidebar appears and shows
          which children are in the viewport
        </li>
        <li>
          Add a new child and observe that the Intersection Observer is applied
        </li>
        <li>
          Click Unobserve and observe that the state of children in the viewport
          is no longer updated
        </li>
        <li>
          Click Observe and observe that the state of children in the viewport
          is updated again
        </li>
      </TestCase.Steps>

      <TestCase.ExpectedResult>
        <p>
          Fragment refs manage Intersection Observers on the first level of host
          children. This page loads with an effect that sets up an Inersection
          Observer applied to each child card.
        </p>
        <p>
          New child nodes will also have the observer applied. Removed nodes
          will be unobserved.
        </p>
      </TestCase.ExpectedResult>
      <Fixture>
        <Fixture.Controls>
          <button
            onClick={() => {
              setItems(prev => [
                ...prev,
                [`Extra child: ${prev.length + 1}`, false],
              ]);
            }}>
            Add Child
          </button>
          <button
            onClick={() => {
              setItems(prev => {