Resize Observer: Responsive Components Without Media Queries

Resize Observer: Responsive Components Without Media Queries | DevPrep

const observer = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const { width, height } = entry.contentRect;
    console.log(`Element resized: ${width}x${height}`);
    
    // Apply responsive classes based on element size
    if (width < 300) {
      entry.target.classList.add("compact");
    } else {
      entry.target.classList.remove("compact");
    }
  }
});

observer.observe(document.querySelector(".card"));

function useResizeObserver(ref) {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (!ref.current) return;

    const observer = new ResizeObserver((entries) => {
      const { width, height } = entries[0].contentRect;
      setDimensions({ width, height });
    });

    observer.observe(ref.current);
    return () => observer.disconnect();
  }, [ref]);

  return dimensions;
}

// Usage
function ResponsiveCard() {
  const ref = useRef(null);
  const { width } = useResizeObserver(ref);

  return (
    <div ref={ref} className={width < 400 ? "card-compact" : "card-full"}>
      {width < 400 ? <CompactView /> : <FullView />}
    </div>
  );
}

function ResponsiveChart({ data }) {
  const containerRef = useRef();
  const { width, height } = useResizeObserver(containerRef);

  return (
    <div ref={containerRef} style={{ width: "100%", height: "400px" }}>
      <Chart data={data} width={width} height={height} />
    </div>
  );
}

function TruncatedText({ text }) {
  const ref = useRef();
  const { width } = useResizeObserver(ref);
  const maxChars = Math.floor(width / 8); // Rough estimate

  return (
    <div ref={ref}>
      {text.length > maxChars ? text.slice(0, maxChars) + "..." : text}
    </div>
  );
}

function AutoGrid({ children, minColumnWidth = 250 }) {
  const ref = useRef();
  const { width } = useResizeObserver(ref);
  const columns = Math.max(1, Math.floor(width / minColumnWidth));

  return (
    <div
      ref={ref}
      style={{
        display: "grid",
        gridTemplateColumns: `repeat(${columns}, 1fr)`,
        gap: "16px"
      }}
    >
      {children}
    </div>
  );
}

Resize Observer: Responsive Components Without Media Queries

Related Articles

System Design #12: Design a Multi-Step Form Wizard

Mastering Senior-Level JavaScript Interview Concepts

System Design #9: Design a Collaborative Text Editor

Comments (0)

Basic Usage

React Hook

Use Cases

1. Responsive Charts

2. Text Truncation

3. Dynamic Grid Columns

Performance Tips