new hook useWidth

[jacobbogers]

would like to have a hook "useWidth" (akin to @material-ui/core/withWidth) that just gives me back the screen size mapped to the breakpoints of the theme

• [x ] This is not a v0.x issue.
• [ x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

basicly in your functional components do this

   const theme = useTheme();
   const width = useWidth(theme); // get the current size of the display mapped to the breakpoints (for the standard theme =    xs,sm,md,lg,xl )

Current Behavior 😯

Examples 🌈

this hook doesnt exist yet, but i made concept one, shall i make pull request?

import { useState, useEffect } from 'react';

export function useWidth(theme) {
	const [info, fn] = useState({});
    const state = {}
	const filter = theme.breakpoints.keys;
	for (const propName of filter){
		const obj = state[propName] = {};
		obj.name = propName;
		obj.only = theme.breakpoints.only(propName).replace(/^@media\s+(.*)$/,'$1');
		obj.mql = window.matchMedia(obj.only);
		
		obj.listener = function(e) {
			this.matched = e.matches;
			if (e.matches){
               fn ({ width: this.name, media: this.only}); // set the new state if matches
			}
		}.bind(obj);
		
		obj.unregister = function() {
			this.mql.removeListener( this.listener );
		}.bind(obj);
		
		obj.mql.addListener( obj.listener );

		if (obj.mql.matches && info.width !== obj.name) {
			/* the addition of media property is only for description/debug/trace puproposes */
            fn ({ width: obj.name, media: obj.only});
		}
	}
	// create a function to remove all listeneres
	function removeAll() {
		for (const propName of filter){
			state[propName].unregister();
		}
	}
	useEffect(()=>{
		return removeAll();
	})
	return info;
}

Context 🔦

[oliviertassinari]

@jacobbogers Did you notice https://next.material-ui.com/layout/use-media-query/#migrating-from-withwidth?

[jacobbogers]

Hola and a good day to you
well the big takeway of all this is that there should be easy analogs to with<Name> for the hooks

Example
withTheme there is useTheme
withStyles there is makeStyles (creates the hook "useStyles")
withWidth there should be useWidth , not needing to write me own, needing knowledge of the theme object internals

[oliviertassinari]

@jacobbogers I'm moving the concern to #14101. Yes, we could make this helper public. Could you share your use case in #14101. Thank you :).