CompareDocumentPositionFragmentContainer() — react Function Reference

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/CompareDocumentPositionFragmentContainer.js lines 64–246

export default function CompareDocumentPositionFragmentContainer({children}) {
  const fragmentRef = useRef(null);
  const beforeRef = useRef(null);
  const afterRef = useRef(null);
  const insideRef = useRef(null);
  const [results, setResults] = useState(null);

  const compareAll = () => {
    const fragment = fragmentRef.current;
    const beforePos = fragment.compareDocumentPosition(beforeRef.current);
    const afterPos = fragment.compareDocumentPosition(afterRef.current);
    const insidePos = insideRef.current
      ? fragment.compareDocumentPosition(insideRef.current)
      : null;

    setResults({
      before: {raw: beforePos},
      after: {raw: afterPos},
      inside: insidePos !== null ? {raw: insidePos} : null,
    });
  };

  return (
    <Fragment>
      <div style={{marginBottom: '16px'}}>
        <button
          onClick={compareAll}
          style={{
            padding: '8px 16px',
            fontSize: '14px',
            fontWeight: 'bold',
            cursor: 'pointer',
          }}>
          Compare All Positions
        </button>
        {results && (
          <span style={{marginLeft: '12px', color: '#666'}}>
            Comparison complete
          </span>
        )}
      </div>

      <div style={{display: 'flex', gap: '24px'}}>
        <div style={{flex: '0 0 300px'}}>
          <div
            style={{
              padding: '16px',
              backgroundColor: '#f0f0f0',
              borderRadius: '8px',
            }}>
            <div
              ref={beforeRef}
              style={{
                padding: '12px',
                backgroundColor: '#d4edda',
                border: '2px solid #28a745',
                borderRadius: '4px',
                marginBottom: '12px',
                textAlign: 'center',
                fontWeight: 'bold',
                color: '#155724',
              }}>
              Before Element
            </div>

            <div
              style={{
                padding: '12px',
                backgroundColor: '#fff3cd',
                border: '2px dashed #ffc107',
                borderRadius: '4px',
                marginBottom: '12px',
              }}>
              <div
                style={{
                  fontSize: '11px',
                  color: '#856404',
                  marginBottom: '8px',
                  fontWeight: 'bold',
                }}>
                FRAGMENT