bloodyowl/stile

Publish 'resizeable' and 'ResizeProvider' as separate module

necolas opened this issue · 3 comments

necolas commented

If I want to use these 2 modules I have to pull in the rest of the library. I think they should also be renamed as 'resizable' means something quite different to viewport-bound media queries.

bloodyowl commented

as this will be a breaking change, I'd say we should go in a more customisable way, and make it able to:

  • be used not only for viewport size, but different parameters (such as device orientation)
  • lazy-load components given the matched media

target api

provider

// initialMedia would accept any shape
// mediaTypes would be an optional propTypes-validation checking what comes out of `getMedia`
<MediaProvider
  mediaTypes={object}
  initialMedia={object}
  getMedia={() => object}
  listener={listener}
>
  {child}
</MediaProvider>

// onMount/onUnmount would let use custom listeners, and the lib would provide default ones, e.g.
const listener = composeListeners(resizeListener, orientationListener) // returns the teardown function

matchMedia decorator

@matchMedia // can be alone, without params 

// async resolving, for instance with webpack
const resolveComponents = ({ viewportWidth, viewportHeight }, cb) => {
  if(viewportWidth < 400) {
    require.ensure([], () => cb({
      SomeComponent: require("MobileComponent"),
    }))
    return
  }
  require.ensure([], () => cb({
    SomeComponent: require("UsualComponent"),
  }))
}

@matchMedia(resolveComponents/*, mergeProps */)

// or sync
const resolveComponents = ({ viewportWidth, viewportHeight }) => ({
  ...viewportWidth < 400 ? MobileComponent : UsualComponent,
})

@matchMedia(resolveComponents/*, mergeProps */)

imports

import { createStylesheet, rem } from "stile"
import { MediaProvider, matchMedia } from "react-stile"
import { composeListeners } from "react-stile/listeners"
import { resizeListener } from "react-stile/listeners/resizeListener"
necolas commented

Sounds good. I'd pick a package name that is clear and easy to search for, e.g., react-media-queries.

I think a common case is to change a handful of styles or nodes, rather than switch out entire components. So the decorator pattern would be good to include too.