react-use
useAsyncuseBatteryuseFaviconuseGeolocationuseHoveruseLifecyclesuseLocationuseLoggeruseMediauseMountuseRafuseSetstateuseSpeechuseTimeoutuseTitleuseUnmountuseUpdaterehooks
useComponentSizeuseDeviceOrientationuseDocumentTitleuseInputValueuseLocalStorageuseNetworkStatususeOnlineStatususeWindowMousePositionuseWindowSizeReact sensor hook that tracks state of a CSS media query.
💡 Implementation
Pretty
Copy
const useMedia = (query, defaultState = false) => {
const [state, setState] = useState(defaultState);
useEffect(() => {
let mounted = true;
const mql = window.matchMedia(query);
const onChange = () => {
if (!mounted) return;
setState(!!mql.matches);
};
mql.addListener(onChange);
setState(mql.matches);
return () => {
mounted = false;
mql.removeListener(onChange);
};
}, [query]);
return state;
};
🚀 Usage
Pretty
Copy
function Demo() {
const isWide = useMedia("(min-width: 480px)");
return Screen is wide: {isWide ? "Yes" : "No"};
}
âš¡Preview
Screen is wide: Yes
🚨 console
Contributors
