ScrollIntoViewTextOnly() — react Function Reference

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

Function javascript BabelCompiler Optimization

Entity Profile

BabelCompiler→ Optimization→ ScrollIntoViewTextOnly() — react Function Reference

Dependency Diagram

graph TD
  17626997_769c_b73d_f2c5_cde55b564eb3["ScrollIntoViewTextOnly()"]
  f361f511_643d_fef8_84d3_4e38e9129616["TextNodesCase.js"]
  17626997_769c_b73d_f2c5_cde55b564eb3 -->|defined in| f361f511_643d_fef8_84d3_4e38e9129616
  style 17626997_769c_b73d_f2c5_cde55b564eb3 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/TextNodesCase.js lines 120–171

function ScrollIntoViewTextOnly() {
  const fragmentRef = useRef(null);
  const [message, setMessage] = useState('');

  const tryScrollIntoView = alignToTop => {
    fragmentRef.current.scrollIntoView(alignToTop);
    setMessage(
      `Called scrollIntoView(${alignToTop}) - page should scroll to text`
    );
  };

  return (
    <TestCase title="scrollIntoView - Text Only">
      <TestCase.Steps>
        <li>Scroll down the page so the text fragment is not visible</li>
        <li>Click one of the scrollIntoView buttons</li>
      </TestCase.Steps>
      <TestCase.ExpectedResult>
        The page should scroll to bring the text content into view. With
        alignToTop=true, the text should appear at the top of the viewport. With
        alignToTop=false, it should appear at the bottom. This uses the Range
        API to calculate text node positions.
      </TestCase.ExpectedResult>
      <Fixture>
        <Fixture.Controls>
          <button onClick={() => tryScrollIntoView(true)}>
            scrollIntoView(true)
          </button>
          <button onClick={() => tryScrollIntoView(false)}>
            scrollIntoView(false)
          </button>
          {message && (
            <div style={{marginTop: '10px', color: 'green'}}>{message}</div>
          )}
        </Fixture.Controls>
        <div
          style={{
            marginTop: '100vh',
            marginBottom: '100vh',
            padding: '20px',
            backgroundColor: '#f0fff0',
            border: '1px solid #cfc',
          }}>
          <Fragment ref={fragmentRef}>
            This fragment contains only text. The scrollIntoView method uses the
            Range API to calculate the text position and scroll to it.
          </Fragment>
        </div>
      </Fixture>
    </TestCase>
  );
}