PrintRectsFragmentContainer() — react Function Reference

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/PrintRectsFragmentContainer.js lines 13–126

export default function PrintRectsFragmentContainer({children}) {
  const fragmentRef = useRef(null);
  const [rects, setRects] = useState([]);

  const getRects = () => {
    const rectsResult = fragmentRef.current.getClientRects();
    setRects(Array.from(rectsResult));
  };

  const getColor = index => colors[index % colors.length];

  return (
    <Fragment>
      <div style={{marginBottom: '16px'}}>
        <button
          onClick={getRects}
          style={{
            padding: '8px 16px',
            fontSize: '14px',
            fontWeight: 'bold',
            cursor: 'pointer',
          }}>
          Print Rects
        </button>
        {rects.length > 0 && (
          <span style={{marginLeft: '12px', color: '#666'}}>
            Found {rects.length} rect{rects.length !== 1 ? 's' : ''}
          </span>
        )}
      </div>

      <div style={{display: 'flex', gap: '20px', marginBottom: '16px'}}>
        <div
          style={{
            position: 'relative',
            width: '30vw',
            height: '30vh',
            border: '1px solid #ccc',
            backgroundColor: '#fafafa',
            borderRadius: '4px',
            overflow: 'hidden',
          }}>
          {rects.length === 0 && (
            <div
              style={{
                position: 'absolute',
                top: '50%',
                left: '50%',
                transform: 'translate(-50%, -50%)',
                color: '#999',
                fontSize: '14px',
              }}>
              Click button to visualize rects
            </div>
          )}
          {rects.map(({x, y, width, height}, index) => {
            const scale = 0.3;
            const color = getColor(index);

            return (
              <div
                key={index}
                style={{
                  position: 'absolute',
                  top: y * scale,
                  left: x * scale,
                  width: width * scale,
                  height: height * scale,
                  border: `2px solid ${color}`,
                  backgroundColor: `${color}22`,
                  boxSizing: 'border-box',
                  borderRadius: '2px',
                }}
              />
            );
          })}
        </div>

        <div style={{flex: 1, fontSize: '13px', fontFamily: 'monospace'}}>
          {rects.map(({x, y, width, height}, index) => {
            const color = getColor(index);