mui / mui/base-ui

Add a `useMediaQuery()` hook

Open
#860 14 comments 1 reaction 0 assignees View on GitHub
scope: new proposal type: new feature waiting for 👍
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

## Steps to reproduce

https://codesandbox.io/s/interesting-hopper-q11wk

`useMediaQuery` logs a warning when called outside of a `ThemeProvider`. But a library author may want to offer a fallback media query when no theme is defined.

- [x] This is not a v0.x issue.
- [x] I have searched the [issues](https://github.com/mui-org/material-ui/issues) of this repository and believe that this is not a duplicate.

## Expected behavior

Calling this should not log any warning, because I can deal without the theme:

```jsx
const isSmall = useMediaQuery(theme =>
theme ? theme.breakpoints.down('sm') : '(max-width:600px)'
);
```

But it does:

```
Warning: Material-UI: the `query` argument provided is invalid.
You are providing a function without a theme in the context.
One of the parent elements needs to use a ThemeProvider.
```

Why would I want to offer a fallback in case of missing theme? For unit tests. I want to be able to test my components without having to wrap them inside a `ThemeProvider`.

## Your environment

| Tech | Version |
|--------------|---------|
| Material-UI | v4.2.1 |
| React | v16.8 |
| Browser | Chrome |

**Search keywords**:

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.