How to use json2mq - 9 common examples

breakpoints.forEach((breakpoint, index) => {
        // media query for each breakpoint
        let bQuery;
        if (index === 0) {
          bQuery = json2mq({ minWidth: 0, maxWidth: breakpoint });
        } else {
          bQuery = json2mq({
            minWidth: breakpoints[index - 1] + 1,
            maxWidth: breakpoint
          });
        }
        // when not using server side rendering
        canUseDOM() &&
          this.media(bQuery, () => {
            this.setState({ breakpoint: breakpoint });
          });
      });

function makeResponsive(
  WrappedComponent: ComponentType,
  mediaQuery: string | QueryObject,
): ComponentType<$Diff> {
  const media = typeof mediaQuery === 'string' ? mediaQuery : json2mq(mediaQuery);

  return class extends Component {
    mql: ?MediaQueryList;

    static displayName = wrapComponentName(WrappedComponent, makeResponsive.name);

    state = {
      matchBreakpoint: false,
    };

    componentDidMount() {
      const mql = window.matchMedia(media);
      mql.addListener(this.updateMediaQuery);
      this.updateMediaQuery(mql);
      this.mql = mql;
    }

export function queryMatch(query: QueryObject) {
  return window.matchMedia(json2mq(query));
}

const queryToMql = (query) => global.matchMedia(json2mq(query))
const createMediaMatcher = (query) => {

export function queryMatch(query: QueryObject) {
  return window.matchMedia(json2mq(query));
}

() => {
      const mediaQueryList = window.matchMedia(
        typeof query === 'string' ? query : json2mq(query)
      );
      let active = true;

      const listener = () => {
        if (!active) {
          return;
        }

        if (mediaQueryList.matches) {
          setMatches(true);
        } else {
          setMatches(false);
        }
      };

      mediaQueryList.addListener(listener);

const mediaQueries = breakpointValues.reduce((sum, value, index) => {
    const options = Object.assign(
      {
        minWidth: value,
      },
      index < keys.length - 1 ? { maxWidth: breakpointValues[index+1] - 1 } : {}
    )
    const mediaQuery = json2mq(options)
    return Object.assign(
      sum,
      {
        [keys[index]]: mediaQuery,
      }
    )
  }, {})
  return mediaQueries