@bianic-ui/media-query/dist/esm/media-query.js

A React hook for changing properties or visibility of a component based on css media query

import { useMediaQuery } from "./use-media-query";
import * as React from "react";
import { useTheme } from "@bianic-ui/system";
import { get, __DEV__ } from "@bianic-ui/utils";

/**
 * Visibility
 *
 * React component to control the visibility of it's
 * children based on the current breakpoint
 */
var Visibility = props => {
  var {
    breakpoint,
    hide,
    children
  } = props;
  var [show] = useMediaQuery(breakpoint);
  var isVisible = hide ? !show : show;
  var rendered = isVisible ? children : null;
  return rendered;
};

export var Hide = props => {
  var query = useQuery(props);
  return /*#__PURE__*/React.createElement(Visibility, {
    breakpoint: query,
    hide: true
  }, props.children);
};

if (__DEV__) {
  Hide.displayName = "Hide";
}

export var Show = props => {
  var query = useQuery(props);
  return /*#__PURE__*/React.createElement(Visibility, {
    breakpoint: query
  }, props.children);
};

if (__DEV__) {
  Show.displayName = "Show";
}

var getBreakpoint = (theme, value) => get(theme, "breakpoints." + value, value);

export function useQuery(props) {
  var {
    breakpoint = "",
    below,
    above
  } = props;
  var theme = useTheme();
  var bpBelow = getBreakpoint(theme, below);
  var bpAbove = getBreakpoint(theme, above);
  var query = bpBelow ? "(max-width: " + bpBelow + ")" : bpAbove ? "(min-width: " + bpAbove + ")" : breakpoint;
  return query;
}
//# sourceMappingURL=media-query.js.map