Skip to content

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

@piotrszczesniak

Description

@piotrszczesniak

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>
  );
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions