How to use json2mq - 9 common examples

To help you get started, we’ve selected a few json2mq examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github akiran / react-slick / src / slider.js View on Github external
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 });
          });
      });
github nusmodifications / nusmods / v3 / src / js / views / hocs / makeResponsive.jsx View on Github external
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;
    }
github nusmodifications / nusmods / v3 / src / js / utils / css.js View on Github external
export function queryMatch(query: QueryObject) {
  return window.matchMedia(json2mq(query));
}
github deepsweet / hocs / packages / with-match-media-props / src / index.js View on Github external
const queryToMql = (query) => global.matchMedia(json2mq(query))
const createMediaMatcher = (query) => {
github nusmodifications / nusmods / website / src / utils / css.ts View on Github external
export function queryMatch(query: QueryObject) {
  return window.matchMedia(json2mq(query));
}
github jaredpalmer / the-platform / src / useMedia.tsx View on Github external
() => {
      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);
github AlexandreBonaventure / vue-mq / src / helpers.js View on Github external
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

json2mq

Generate media query string from JSON or javascript object

MIT
Latest version published 10 years ago

Package Health Score

67 / 100
Full package analysis

Popular json2mq functions