Add useBreakpointValue hook

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Provide a JavaScript API as a counterpart to the CSS sx breakpoint's API.

Examples 🌈

function MyApp() {
  const elevation = useBreakpointValue({ xs: 1, md: 2 });
  return <AppBar elevation={elevation} sx={{ mb: { xs: 1, md: 2 } }}>...</AppBar>;
}

Internally, useBreakpointValue would use useMediaQuery or useBreakpoint (probably better).

Motivation 🔦

We have started to surface the need for it in https://github.com/mui-org/material-ui/issues/15561#issuecomment-674454140. The hook can be used anytime a value needs to be determined based on the breakpoints. This comment https://github.com/mui-org/material-ui/issues/17000#issuecomment-740159615 triggered the idea around opening this issue. I think that this hook is best for props that are already dependent on JavaScript logic.

One could argue that many of the CSS properties could be made responsive, e.g. the color prop. However, it might be overkill, we could use this hook as an escape hatch.

We have been discussing the idea to remove the <HiddenCss> helper as the Box covers most of the usage thanks to the sx's display feature. I think that this JS counterpart can solve the <HiddenJs> part of the migration issue: https://github.com/mui-org/material-ui/issues/19704#issuecomment-612034247.

Benchmarks

• https://seek-oss.github.io/braid-design-system/components/useResponsiveValue
• https://react-restart.github.io/hooks/api/useBreakpoint
• https://chakra-ui.com/docs/hooks/use-breakpoint-value
• https://xstyled.dev/docs/hooks/#usebreakpoint

Start with the responsive values documentation linked in the issue and compare the proposed hook with the mentioned useMediaQuery and useBreakpoint entry points. Review the linked issues and benchmark implementations to clarify the API and behavior; done means an agreed JavaScript counterpart for breakpoint-dependent values, with its scope and integration path established.