Menu

gitpiper

useMediaQuery react Code Snippet in 2023

hooksstateeffectintermediate

Last Updated: 1 February 2023

Checks if the current environment matches a given media query and returns the appropriate value.

  • Check if window and window.matchMedia exist. Return whenFalse if not (e.g. SSR environment or unsupported browser).
  • Use window.matchMedia() to match the given query. Cast its matches property to a boolean and store in a state variable, match, using the useState() hook.
  • Use the useEffect() hook 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.
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; };
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'));

react snippet similar to useMediaQuery For You in February 2023

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️

© 2023 GitPiper. All rights reserved

Rackpiper Technology Inc

Company

About UsBlogContact

Subscribe to our Newsletter

Subscribe to get resources directly to your inbox. You won't receive any spam! ✌️