useMediaQuery Hook
ReactJS
Hard
6 views
Problem Description
Create a hook that returns true/false based on a media query.
Output Format
Render a React component.
Constraints
Use matchMedia and listen to changes.
Official Solution
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>
);
}
Solutions (0)
No solutions submitted yet. Be the first!
No comments yet. Start the discussion!