{"id":22382478,"url":"https://github.com/jcoreio/react-media-material-ui","last_synced_at":"2025-08-03T11:08:56.023Z","repository":{"id":32693046,"uuid":"139910266","full_name":"jcoreio/react-media-material-ui","owner":"jcoreio","description":"An easy way to use breakpoints from your material-ui theme with react-media","archived":false,"fork":false,"pushed_at":"2022-12-07T09:18:04.000Z","size":2951,"stargazers_count":10,"open_issues_count":18,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-06T18:50:41.839Z","etag":null,"topics":["material-ui","media-queries","react","react-media","responsive-design"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jcoreio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-07-05T23:27:19.000Z","updated_at":"2021-04-21T20:11:24.000Z","dependencies_parsed_at":"2023-01-14T21:56:55.412Z","dependency_job_id":null,"html_url":"https://github.com/jcoreio/react-media-material-ui","commit_stats":null,"previous_names":[],"tags_count":5,"template":false,"template_full_name":null,"purl":"pkg:github/jcoreio/react-media-material-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-media-material-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-media-material-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-media-material-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-media-material-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jcoreio","download_url":"https://codeload.github.com/jcoreio/react-media-material-ui/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jcoreio%2Freact-media-material-ui/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267983371,"owners_count":24176058,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-07-31T02:00:08.723Z","response_time":66,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["material-ui","media-queries","react","react-media","responsive-design"],"created_at":"2024-12-05T00:13:11.023Z","updated_at":"2025-08-03T11:08:55.994Z","avatar_url":"https://github.com/jcoreio.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-media-material-ui\n\n[![Build Status](https://travis-ci.org/jcoreio/react-media-material-ui.svg?branch=master)](https://travis-ci.org/jcoreio/react-media-material-ui)\n[![Coverage Status](https://codecov.io/gh/jcoreio/react-media-material-ui/branch/master/graph/badge.svg)](https://codecov.io/gh/jcoreio/react-media-material-ui)\n[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)\n[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)\n\n## Obsolete\n\nI'd recommend using `useMediaQuery` and `Hidden` from Material-UI now.\n\nYou can replace `BreakpointMedia` elements as follows:\n\n```js\n// MediaQuery.js\nimport * as React from 'react'\nexport const MediaQuery = ({ query, children }) =\u003e children(useMediaQuery(query))\n```\n\n```diff\n// MyComponent.js\n-import BreakpointMedia from 'react-media-material-ui'\n+import MediaQuery from './MediaQuery'\n\n-\u003cBreakpointMedia max=\"xs\"\u003e\n+\u003cMediaQuery query={theme =\u003e theme.breakpoints.down('xs')}\u003e\n  {matches =\u003e (\n    \u003cDialog\n      fullScreen={matches}\n      ...\n```\n\n## Intro\n\nAn easy way to use breakpoints from your material-ui theme with\n(`react-media`)[https://github.com/ReactTraining/react-media].  This is a bit\nmore flexible than material-ui's `Hidden` component because it allows you to\nrender whatever you want if the query doesn't match, rather than just hiding\nthe content.\n\nThis is also an especially convenient replacement for material-ui's\n`withMobileDialog` HOC:\n\n```js\n\u003cBreakpointMedia max=\"xs\"\u003e\n  {matches =\u003e (\n    \u003cDialog\n      fullScreen={matches}\n      ...\n```\n\n## Installation\n\n```sh\nnpm install --save @material-ui/core react-media react-media-material-ui\n```\n\n## Example\n\nThe following component will only render if the screen width is at least\n`theme.breakpoints.values.sm` (from your Material-UI theme).\n```js\nimport BreakpointMedia from 'react-media-material-ui/BreakpointMedia'\n\nconst HideOnMobile = ({children}) =\u003e (\n  \u003cBreakpointMedia min=\"sm\"\u003e\n    {children}\n  \u003c/BreakpointMedia\u003e\n)\n```\n\n## PropTypes\n\n### `min` (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`)\n\nIf given, will include `minWidth: theme.breakpoints.up(props.min)` in the\n`query` prop to `react-media`.\n\n### `max` (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`)\n\nIf given, will include `maxWidth: theme.breakpoints.down(props.max)` in\nthe `query` prop to `react-media`.\n\n### `children` (`((matches: boolean) =\u003e ?React.Node) | React.Node`)\n\nA function whose only argument will be a boolean flag that indicates whether the\nmedia query matches or not, returning what to render, or just a React node to be\nrendered if the query matches.\n\n### `render` (`() =\u003e React.Node`)\n\nA function that is only called if the query matches, and returns what to render\nwhen the query matches.\n\n### `defaultMatches` (`boolean`)\n\nWhen rendering on the server you can use this prop to set the initial state on the server to match whatever you think it will be on the client. You can detect the user's device by analyzing the user-agent string from the HTTP request in your server-side rendering code.\n\n### `onChange` (`(matches: boolean) =\u003e any`)\n\nCallback fired when the status of the media query changes.\n\n### `targetWindow` (`Window`)\n\nCan be specified if you want the query to be evaluated against a different window object than the one the code is running in. This can be useful for example if you are rendering part of your component tree to an iframe or a popup window.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Freact-media-material-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjcoreio%2Freact-media-material-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjcoreio%2Freact-media-material-ui/lists"}