Random design for "Adaptative" component

Responsive.re

/* This type defines a value that 'depends' on the screen size, and changes based on `window.matchMedia` */
type dependant('value) = {
  default: 'value,
  mobile: option('value), /* 800px */
  desktop: option('value), /* 1200px */
  huge: option('value) /* 1900px */
};

type t('value) =
  | Fixed('value)
  | ByScreenSize(dependant('value));

module OnMobileOnly = {
  let className = [%cx
    {|
    display: none;
    @media screen and (min-width: 300px) {
      display: block;
    }
  |}
  ];
  [@react.component]
  let make = (~children) => {
    <span className> children </span>;
  };
};

/* <OnMobileOnly>
     <div />
   </OnMobileOnly>

   <MediaQuery
     onMobile={_ => <div />}
     onDesktop={_ => <div />}
   />
    */