Match

[Ayc0]

<Match>
  <Component1 only="md"> // Only display this component on md
    ...
  </Component1>
  <Component2 only="xlDown" />  // Only display this component on xlDown
  ...
</Match>

Inspired by Reach Router (see createRoute and Router)

Behavior: Parse props of children and displays them if their inner media query matches the webview

Should we parse inner props too?

[Ayc0]

Possible implementation:

const parseChildren = (element) => {
  if (!element.props) {
    return element;
  }
  const children = (element.props.children) ?
    React.Children.map(element.props.children, parseChildren):
    null;
  const { only, ...props } = element.props || {};
  const clone = React.cloneElement(element, props, children);
  if (!only) {
    return clone;
  }  return <Only on={only}>{clone}</Only>
}

const Match = ({ children }) => React.Children.map(children, parseChildren);

[Ayc0]

https://codepen.io/ayc0/pen/ejPGwx?editors=0010

[Ayc0]

included in c61e553581abaf9b2933d59a18d6208648652dec