useMediaQuery Hook

useMediaQuery Hook

Hard ReactJS Hooks & Effects 29 views
Explanation Complexity

Problem Statement

Create a hook that returns true/false based on a media query.

Input Format

No input.

Output Format

Render a React component.

Constraints

Use matchMedia and listen to changes.

Input / Output Format

Input Format
No input.
Output Format
Render a React component.
Constraints
Use matchMedia and listen to changes.

Examples

Input:
Output:
(React code)

Example Solution (Public)

ReactJS 
import React, { useEffect, useState } from 'react';

function useMediaQuery(query) {
  const [matches, setMatches] = useState(() => window.matchMedia(query).matches);

  useEffect(() => {
    const mql = window.matchMedia(query);
    function onChange(e) {
      setMatches(e.matches);
    }
    if (mql.addEventListener) mql.addEventListener('change', onChange);
    else mql.addListener(onChange);

    setMatches(mql.matches);

    return () => {
      if (mql.removeEventListener) mql.removeEventListener('change', onChange);
      else mql.removeListener(onChange);
    };
  }, [query]);

  return matches;
}

export default function App() {
  const isSmall = useMediaQuery('(max-width: 600px)');

  return (
    <div style={{ padding: 16 }}>
      <strong>meetcode layout</strong>
      <div style={{ marginTop: 8, color: '#555' }}>Small screen: {isSmall ? 'Yes' : 'No'}</div>
    </div>
  );
}

Official Solution Code

import React, { useEffect, useState } from 'react';

function useMediaQuery(query) {
  const [matches, setMatches] = useState(() => window.matchMedia(query).matches);

  useEffect(() => {
    const mql = window.matchMedia(query);
    function onChange(e) {
      setMatches(e.matches);
    }
    if (mql.addEventListener) mql.addEventListener('change', onChange);
    else mql.addListener(onChange);

    setMatches(mql.matches);

    return () => {
      if (mql.removeEventListener) mql.removeEventListener('change', onChange);
      else mql.removeListener(onChange);
    };
  }, [query]);

  return matches;
}

export default function App() {
  const isSmall = useMediaQuery('(max-width: 600px)');

  return (
    <div style={{ padding: 16 }}>
      <strong>meetcode layout</strong>
      <div style={{ marginTop: 8, color: '#555' }}>Small screen: {isSmall ? 'Yes' : 'No'}</div>
    </div>
  );
}
Please login to submit solutions.
Editor
Output

                                        

                                    

                                    

                                        

                                                                                    
Please login to submit solutions.