React: How to implement responsive design in React?

1.container {
2  display: grid;
3  grid-template-columns: 1fr;
4}
5
6@media (min-width: 768px) {
7  .container {
8    grid-template-columns: repeat(2, 1fr);
9  }
10}
11
12@media (min-width: 1024px) {
13  .container {
14    grid-template-columns: repeat(3, 1fr);
15  }
16}

1function ResponsiveGrid({ children }) {
2  return (
3    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
4      {children}
5    </div>
6  );
7}

1function useMediaQuery(query: string): boolean {
2  const [matches, setMatches] = useState(false);
3
4  useEffect(() => {
5    const media = window.matchMedia(query);
6    setMatches(media.matches);
7
8    const listener = (e: MediaQueryListEvent) => setMatches(e.matches);
9    media.addEventListener("change", listener);
10    return () => media.removeEventListener("change", listener);
11  }, [query]);
12
13  return matches;
14}
15
16// Usage
17function Component() {
18  const isMobile = useMediaQuery("(max-width: 768px)");
19  return isMobile ? <MobileLayout /> : <DesktopLayout />;
20}

1<picture>
2  <source media="(min-width: 1024px)" srcSet="large.jpg" />
3  <source media="(min-width: 768px)" srcSet="medium.jpg" />
4  <img src="small.jpg" alt="Responsive" />
5</picture>