domaingrouposs/react-media-query-hoc

React Higher Order Component for Media Queries

react-media-query-hoc's Issues

Setup semantic release

This will solve:
#19

Add e2e test framework

Maybe use cypress: https://www.cypress.io/ for some simple e2e tests

State being updated on window resize, context isn't.

Hello,

I have a Component that is wrapped by the withMedia HOC.

When I resize the window, I can see that the MediaQueryProvider's state is currently updating to the correct media device, but the context of the withMedia HOC is not.

In order for the wrapped components and withMediaHOC to reflect the right device in context/props, I have to refresh the page.

I'm currently using React 16.

Here is how I'm using the MediaQueryProvider

Context is not updated when state changes

I'm using React 16 with a component wrapped inside the withMedia HOC. Media queries works fine, refreshing the whole page at different resolutions I see that the state/context of the MediaQueryProvider component is correctly updated. However, resizing the window updates the state but not the context, so any child component won't see the new media queries values and won't trigger any layout change.

Fix Travis badge

The travis CI badge links to a build which says
"No builds for this repository" but there was builds at some point?

I think the config has gone haywire - requires some small investigation to resolve

Add CI to the repo

Integrate travis to run yarn test for all PRs

withMedia hoc can cause jumpy behaviour

Should withMedia render the component before context.media is defined?
We've seen cases where we can see a jump where it renders the default view, and then when the media prop is defined it jumps to say the mobile view.
I believe react-responsive won't render its children before media is defined.

Allow passing of values to matchmedia for Server Side Rendering

Server rendering can be done if there is way to pass static values such as deviceWidth, deviceHeight etc so that on client mount there is no client / server mismatch issues (matchmedia lib can handle this)

Interface could be:

const App = (props) => {
  const customQueries = {
    verySmall: 'screen and (max-width: 300px)',
    someOtherMediaQuery: 'screen and (min-width: 301px)',
  }; 

  const values = {
    deviceWidth: 500,
    orientation: 'portrait',
  };

  return (
    <MediaQueryProvider queries={customQueries} values={values}>
      <TheRestOfMyApp />
    </MediaQueryProvider>
  );
};

Use latest React createContext

Modify this library to use https://reactjs.org/docs/context.html

Prevent MediaQueryProvider from printing any additional div

As the MediaQueryProvider component should be used at the root-level of the application as stated in the docs, it makes no sense that it adds an additional element to the HTML structure. In my case, using a layout based on flexboxes that div that gets printed is a problem. Maybe you could use Children.only like Apollo Client does to make this component "transparent"?

Move to latest React, enzyme and babel

What subject says :)

Changelog for v1.0 ?

Hello,

Is it possible to have a changelog or at least the breaking changes from v0.5 to v1.0 ?

Thanks !

Update to Babel 7

Engineering Health: update babel to 7

See: https://babeljs.io/docs/en/v7-migration

Setup with nwb

See: https://github.com/insin/nwb

Possibly suitable toolkit for react libraries (note: create-react-app doesnt seem like its suitable for npm libs)
See: facebook/create-react-app#907

Setting up nwb will mean we dont need to do nasty stuff like check in dist 🎉