kristofdombi / react-with-breakpoints Goto Github PK

To resolve, I had to change my import to reference the min.js file after updating to 4.0.1
import { BreakpointsProvider } from "react-with-breakpoints/dist/react-with-breakpoints.min.js";
instead of:
import { BreakpointsProvider } from "react-with-breakpoints";

Rolling back to 4.0.0 resolved this too. Briefly comparing the two versions revealed a difference in the file naming where 4.0.0 had the react-with-breakpoints.umd.js & react-with-breakpoints.es5.js and 4.0.1 had react-with-breakpoints.min.js & react-with-breakpoints.js

A fix would be much appreciated.

Hi @kristof0425, thank you for putting out this library! The design looks great, but I noticed that one can only specify three breakpoints: small, medium and large. I'm wondering your thoughts on making that object more flexible or allow overriding it from the props in ShowAt and HideAt?

In our app, we have a few more breakpoints for more granular behavior, as well as some custom breakpoints for certain pages and layouts. And I am not sure how to implement those with this library.

Thoughts?

When I install this package via npm, it is correctly installed into my node_modules. However, when I try to use it in my code via
import {ShowAt, HideAt} from 'react-with-breakpoints';
I get a Module not found error. After having a look into the package.json of this module, I saw this line:

https://github.com/kristof0425/react-with-breakpoints/blob/2509e71a1a812e6b72747302da16f6391fadeff9/package.json#L5

This makes npm look inside node_modules/react-with-breakpoints/dist/withBreakpoint.js, the dist folder however only contains a react-with-breakpoints.js. I believe this is what the main Attribute in the package.json should point to. Changing this locally resolved the issue for me. As a temporary solution until this is resolved, changing the import statement to
import { ShowAt, HideAt} from 'react-with-breakpoints/dist/react-with-breakpoints';
also works.

Hey there,
First off, this is a really helpful project. I'm pretty new to React, and after looking at some of the markup from the AirBnb site, I was a little bummed to learn that the ShowAt/HideAt feature wasn't built in to React, so I think it's awesome that you've created an open source replica.

Also, I noticed that they have an additional xlarge breakpoint at 1440px that isn't currently included in this project. I've forked and included it to match the nature of your existing code (as best I can tell). Whether you decide to include it or not, I'll still be using your handy project.

On large screens (with width higher than the large breakpoint), none of the if clauses in withBreakpoints.handleResize() is entered. This leaves the currentBreakpoint state empty so that ShowAt will not show the passed component even when breakpoint: large is set. As soon as one resizes the window to be slimmer than the large breakpoint, the state is set correctly and it works, this is however not the behavior I would expect.

https://github.com/kristof0425/react-with-breakpoints/blob/2509e71a1a812e6b72747302da16f6391fadeff9/src/withBreakpoints.js#L20-L36

Do the HideAt and ShowAt components just show/hide the children (as the documentation suggests), or do they render/not render as the code suggests?

Probably it will cause a breaking change because it will only support React version 16.3 or above.

• Refactor withBreakpoints to be a context provider.
• Refactor HideAt and ShowAt to be context consumers.

In useBreakpoint.ts, small and medium need "largeAndBelow" added. Currently, if you use "largeAndBelow", HideAt will disappear below 1024; however, the component will show back up when the size is 768 or below.

How to fire an event when breakpoint changes?

Can you implement something like>

// Media query breakpoints
const breakpoints = {
  small: 468,
  medium: 768,
  large: 1024,
  xlarge: Infinity,
};

<BreakpointsProvider
  breakpoints={breakpoints}
  onBreakpointChange={( breakpoint ) => {
     // Logic here
  }}>
    {/* ... */}
</BreakpointsProvider>

Any plans for introducing debounce on the resize events to prevent lots of re-renders?