41 lines
1.3 KiB
Markdown
41 lines
1.3 KiB
Markdown
---
|
|
title: useMediaQuery
|
|
tags: hooks,state,effect,intermediate
|
|
---
|
|
|
|
A hook that returns a value based on a media query.
|
|
|
|
- Check if `window` and `window.matchMedia` exist, return `whenFalse` if not.
|
|
- Use `window.matchMedia()` to match the given `query`, cast its `matches` property to a boolean and store in a state variable, `match`, using `React.useState()`.
|
|
- Use `React.useEffect()` to add a listener for changes and to clean up the listeners after the hook is destroyed.
|
|
- Return either `whenTrue` or `whenFalse` based on the value of `match`.
|
|
|
|
```jsx
|
|
const useMediaQuery = (query, whenTrue, whenFalse) => {
|
|
if (typeof window === 'undefined' || typeof window.matchMedia === 'undefined') return whenFalse;
|
|
|
|
const mediaQuery = window.matchMedia(query);
|
|
const [match, setMatch] = React.useState(!!mediaQuery.matches);
|
|
|
|
React.useEffect(() => {
|
|
const handler = () => setMatch(!!mediaQuery.matches);
|
|
mediaQuery.addListener(handler);
|
|
return () => mediaQuery.removeListener(handler);
|
|
}, []);
|
|
|
|
return match ? whenTrue : whenFalse;
|
|
};
|
|
```
|
|
|
|
```jsx
|
|
const ResponsiveText = () => {
|
|
const text = useMediaQuery(
|
|
'(max-width: 400px)', 'Less than 400px wide', 'More than 400px wide'
|
|
);
|
|
|
|
return <span>{text}</span>;
|
|
}
|
|
|
|
ReactDOM.render(<ResponsiveText />, document.getElementById('root'));
|
|
```
|