How to use the css-mediaquery.match function in css-mediaquery

To help you get started, we’ve selected a few css-mediaquery 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 DomainGroupOSS / react-media-query-hoc / src / media-query-provider.js View on Github external
const media = Object.keys(this.props.queries).reduce((acc, queryName) => {
      const query = this.props.queries[queryName];

      if (this.props.values) {
        acc[queryName] = cssMediaQuery.match(query, this.props.values);
      } else {
        // if the consumer has not set `values` and is server rendering, default to false
        // because we don't know the screen size
        acc[queryName] = hasMatchMedia
          ? window.matchMedia(query).matches
          : false;
      }

      return acc;
    }, {});
github mui-org / material-ui / docs / src / pages / components / use-media-query / ServerSide.js View on Github external
const ssrMatchMedia = query => ({
    matches: mediaQuery.match(query, {
      // The estimated CSS width of the browser.
      width: 800,
    }),
  });
github trurl-master / jsdom-testing-mocks / src / mocks / viewport.js View on Github external
get matches() {
      return mediaQuery.match(query, state.currentDesc)
    },
    media: query,
github telus / tds-core / config / jest / __mocks__ / matchMedia.js View on Github external
const doesQueryMatch = (query, viewportSize) => {
  if (!viewportSize) {
    return true
  }

  return mediaQuery.match(query, {
    type: 'screen',
    width: `${viewportSize}px`,
  })
}
github OrigenStudio / material-ui-layout / example / config / material-ui / theme.js View on Github external
? (query: string) => ({
              matches: mediaQuery.match(query, {
                width: theme.breakpoints.values[INITIAL_BREAKPOINT],
              }),
            })
          : undefined,
github vitalets / react-native-extended-stylesheet / src / replacers / media-queries.js View on Github external
mqKeys.forEach(key => {
      const mqStr = key.replace(PREFIX, '');
      const isMatch = mediaQuery.match(mqStr, matchObject);
      if (isMatch) {
        merge(res, obj[key]);
      }
    });
  }
github jtangelder / grunt-stripmq / tasks / lib / stripmq.js View on Github external
ast.stylesheet.rules = ast.stylesheet.rules.reduce(function (rules, rule) {
        if (rule.type === 'media') {
            if (mediaQuery.match(rule.media, options)) {
                rules.push.apply(rules, rule.rules);
            }
        }
        else {
            rules.push(rule);
        }
        return rules;
    }, []);
    return ast;
github tuckerconnelly / react-native-match-media / index.js View on Github external
get matches() {
    return mediaQuery.match(this._query, {
      type: 'screen',
      ...Dimensions.get('window'),
    })
  }
github gimenete / unicycle / src / previews.tsx View on Github external
Object.keys(mediaQueries).forEach(id => {
            const condition = mediaQueries[id]
            const matches = mediaQuery.match(condition, media)
            if (matches) {
              classNames.push(id)
            }
          })
        } catch (err) {

css-mediaquery

Parses and determines if a given CSS Media Query matches a set of values.

BSD
Latest version published 10 years ago

Package Health Score

67 / 100
Full package analysis

Similar packages