yocontra / react-responsive

CSS media queries in react - for responsive design, and more.
https://contra.io/react-responsive
MIT License
6.95k stars 297 forks source link

Use with Next.js 13 [docs improvement] #319

Open piotrszczesniak opened 2 months ago

piotrszczesniak commented 2 months ago

Just to note:

When using with Next.js 13 I implemented it this way - isMediumScreen is defined on the first render, otherwise it was defined on window width change:

import { breakpoints, mediaBreakPointDown } from './styles/MediaQueries';
import dynamic from 'next/dynamic';
const MediaQuery = dynamic(() => import('react-responsive'), {
  ssr: false,
});

const Component = ({ props} : PropsType) => {
  return (
    <MediaQuery query={mediaBreakPointDown(breakpoints.md)}>
      {(isMediumScreen: boolean) => (
        // Your component code here, using isMediumScreen
      )}
    </MediaQuery>
  );
};
yocontra commented 2 weeks ago

Want to add a nextjs section to the README as a PR?