10 examples of 'material ui media queries' in JavaScript

Every line of 'material ui media queries' code snippets is scanned for vulnerabilities by our powerful machine learning engine that combs millions of open source libraries, ensuring your JavaScript code is secure.

All examples are scanned by Snyk Code

By copying the Snyk Code Snippets you agree to
this disclaimer
86@Input() set mediaQuery(m: Array<{screenWidth: number, blockCount: number}>) {
87 this._mediaSorted = m.sort((a, b) => a.screenWidth - b.screenWidth)
88}
Important

Use secure code every time

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

18get media() {
19 return this._query
20}
69public get mediaQuery(): ComponentMediaQuery {
70 if (this.offsetWidth < 768) {
71 return ComponentMediaQuery.mobile;
72 } else if (this.offsetWidth < 1200) {
73 return ComponentMediaQuery.tablet;
74 } else {
75 return ComponentMediaQuery.desktop;
76 }
77}
89public get isMqL(): boolean {
90 return this.$mq.state.isMqL;
91}
13render(): ?React$Element<*> {
14 const {width, height} = this.state.window;
15 const val = MediaQuerySelector.query(this.props, width, height);
16 if (val) {
17 return this.props.children;
18 } else {
19 return null;
20 }
21}
14export var MediaQueryWrapper = function MediaQueryWrapper() {
15 var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
16
17 var dispatch = props.dispatch,
18 fakeWidth = props.fakeWidth,
19 children = props.children,
20 other = _objectWithoutProperties(props, ["dispatch", "fakeWidth", "children"]);
21
22 var values = {
23 deviceWidth: fakeWidth,
24 width: fakeWidth
25 };
26 return React.createElement(MediaQuery, _extends({}, other, {
27 values: values
28 }), children);
29};
3export default function MediaQuery({ children, device, onChange, ...settings }) {
4 const matches = useMediaQuery(settings, device, onChange)
5
6 if (typeof children === 'function') {
7 return children(matches)
8 }
9 return matches ? children : null
10}
153function updateMatchedMedia(polyfill, queries) {
154 var query
155 , current = {}
156
157 // clear the cache since a resize just happened
158 MediaManager.clearCache()
159
160 // look for media matches that have changed since the last inspection
161 for (query in queries) {
162 if (!queries.hasOwnProperty(query)) continue
163 current[query] = MediaManager.matchMedia(query).matches
164 if (current[query] != state[query]) {
165 callback.call(polyfill, query, MediaManager.matchMedia(query).matches)
166 }
167 }
168 state = current
169}
30var MediaQueryWrapper = function MediaQueryWrapper() {
31 var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
32 var dispatch = props.dispatch,
33 fakeWidth = props.fakeWidth,
34 children = props.children,
35 other = (0, _objectWithoutProperties2["default"])(props, ["dispatch", "fakeWidth", "children"]);
36 var values = {
37 deviceWidth: fakeWidth,
38 width: fakeWidth
39 };
40 return _react["default"].createElement(_reactResponsive["default"], (0, _extends2["default"])({}, other, {
41 values: values
42 }), children);
43};
223get hasMedia(): boolean {
224 /**
225 * This tags represents media-content
226 * @type {string[]}
227 */
228 const mediaTags = [
229 'img',
230 'iframe',
231 'video',
232 'audio',
233 'source',
234 'input',
235 'textarea',
236 'twitterwidget',
237 ];
238
239 return !!this.holder.querySelector(mediaTags.join(','));
240}

Related snippets