Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
piotrszczesniak opened this issue Mar 20, 2024 · 2 comments
Open

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

piotrszczesniak opened this issue Mar 20, 2024 · 2 comments

Comments

@piotrszczesniak
Copy link

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
Copy link
Owner

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

@dwjohnston
Copy link

@piotrszczesniak Can you include what you have included in your ./styles/MediaQueries ?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants