Skip to content

Instantly share code, notes, and snippets.

@davesnx

davesnx/Responsive.re

Created July 25, 2024 11:00
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save davesnx/31e22eeb6d890208470cbdd3f96a481b to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save davesnx/31e22eeb6d890208470cbdd3f96a481b to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. davesnx created this gist Jul 25, 2024.
    36 changes: 36 additions & 0 deletions Responsive.re
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,36 @@
    /* 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 />}
    />
    */