{"id":26690775,"url":"https://github.com/contra/react-responsive","last_synced_at":"2025-03-26T16:01:05.505Z","repository":{"id":37501071,"uuid":"22968365","full_name":"yocontra/react-responsive","owner":"yocontra","description":"CSS media queries in react - for responsive design, and more.","archived":false,"fork":false,"pushed_at":"2025-03-01T21:26:29.000Z","size":4366,"stargazers_count":7095,"open_issues_count":5,"forks_count":299,"subscribers_count":54,"default_branch":"master","last_synced_at":"2025-03-25T06:00:46.940Z","etag":null,"topics":["react"],"latest_commit_sha":null,"homepage":"https://contra.io/react-responsive","language":"TypeScript","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/yocontra.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"contra"}},"created_at":"2014-08-14T20:55:43.000Z","updated_at":"2025-03-21T21:29:49.000Z","dependencies_parsed_at":"2024-01-06T07:59:08.683Z","dependency_job_id":"787aa86e-3992-4281-ae7a-08a092a56e3c","html_url":"https://github.com/yocontra/react-responsive","commit_stats":{"total_commits":277,"total_committers":66,"mean_commits":4.196969696969697,"dds":0.7870036101083032,"last_synced_commit":"121c86ddcbcd2f5523dc364393be3605c90d0a0f"},"previous_names":["contra/react-responsive","wearefractal/react-responsive"],"tags_count":52,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yocontra%2Freact-responsive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yocontra%2Freact-responsive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yocontra%2Freact-responsive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yocontra%2Freact-responsive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yocontra","download_url":"https://codeload.github.com/yocontra/react-responsive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245689494,"owners_count":20656416,"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","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":["react"],"created_at":"2025-03-26T16:00:37.620Z","updated_at":"2025-03-26T16:01:05.486Z","avatar_url":"https://github.com/yocontra.png","language":"TypeScript","readme":"# react-responsive [![NPM version][npm-image]][npm-url] [![Downloads][downloads-image]][npm-url]\n\n## Information\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003ePackage\u003c/td\u003e\u003ctd\u003ereact-responsive\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eDescription\u003c/td\u003e\n\u003ctd\u003eMedia queries in react for responsive design\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eBrowser Version\u003c/td\u003e\n\u003ctd\u003e\u003e= IE6*\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd colspan='2'\u003e\u003ca href='http://contra.io/react-responsive/'\u003eDemo\u003c/a\u003e\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\nThe best supported, easiest to use react media query module.\n\n## Install\n\n```console\n$ npm install react-responsive --save\n```\n\n## Example Usage\n\n### With Hooks\n\nHooks is a new feature available in 8.0.0!\n\n```jsx\nimport React from 'react'\nimport { useMediaQuery } from 'react-responsive'\n\nconst Example = () =\u003e {\n  const isDesktopOrLaptop = useMediaQuery({\n    query: '(min-width: 1224px)'\n  })\n  const isBigScreen = useMediaQuery({ query: '(min-width: 1824px)' })\n  const isTabletOrMobile = useMediaQuery({ query: '(max-width: 1224px)' })\n  const isPortrait = useMediaQuery({ query: '(orientation: portrait)' })\n  const isRetina = useMediaQuery({ query: '(min-resolution: 2dppx)' })\n\n  return (\n    \u003cdiv\u003e\n      \u003ch1\u003eDevice Test!\u003c/h1\u003e\n      {isDesktopOrLaptop \u0026\u0026 \u003cp\u003eYou are a desktop or laptop\u003c/p\u003e}\n      {isBigScreen \u0026\u0026 \u003cp\u003eYou have a huge screen\u003c/p\u003e}\n      {isTabletOrMobile \u0026\u0026 \u003cp\u003eYou are a tablet or mobile phone\u003c/p\u003e}\n      \u003cp\u003eYour are in {isPortrait ? 'portrait' : 'landscape'} orientation\u003c/p\u003e\n      {isRetina \u0026\u0026 \u003cp\u003eYou are retina\u003c/p\u003e}\n    \u003c/div\u003e\n  )\n}\n```\n\n### With Components\n\n```jsx\nimport MediaQuery from 'react-responsive'\n\nconst Example = () =\u003e (\n  \u003cdiv\u003e\n    \u003ch1\u003eDevice Test!\u003c/h1\u003e\n    \u003cMediaQuery minWidth={1224}\u003e\n      \u003cp\u003eYou are a desktop or laptop\u003c/p\u003e\n      \u003cMediaQuery minWidth={1824}\u003e\n        \u003cp\u003eYou also have a huge screen\u003c/p\u003e\n      \u003c/MediaQuery\u003e\n    \u003c/MediaQuery\u003e\n    \u003cMediaQuery minResolution=\"2dppx\"\u003e\n      {/* You can also use a function (render prop) as a child */}\n      {(matches) =\u003e\n        matches ? \u003cp\u003eYou are retina\u003c/p\u003e : \u003cp\u003eYou are not retina\u003c/p\u003e\n      }\n    \u003c/MediaQuery\u003e\n  \u003c/div\u003e\n)\n```\n\n## API\n\n### Using Properties\n\nTo make things more idiomatic to react, you can use camel-cased shorthands to construct media queries.\n\nFor a list of all possible shorthands and value types see https://github.com/yocontra/react-responsive/blob/master/src/mediaQuery.ts#L9.\n\nAny numbers given as shorthand will be expanded to px (`1234` will become `'1234px'`).\n\nThe CSS media queries in the example above could be constructed like this:\n\n```jsx\nimport React from 'react'\nimport { useMediaQuery } from 'react-responsive'\n\nconst Example = () =\u003e {\n  const isDesktopOrLaptop = useMediaQuery({ minWidth: 1224 })\n  const isBigScreen = useMediaQuery({ minWidth: 1824 })\n  const isTabletOrMobile = useMediaQuery({ maxWidth: 1224 })\n  const isPortrait = useMediaQuery({ orientation: 'portrait' })\n  const isRetina = useMediaQuery({ minResolution: '2dppx' })\n\n  return \u003cdiv\u003e...\u003c/div\u003e\n}\n```\n\n### Forcing a device with the `device` prop\n\nAt times you may need to render components with different device settings than what gets automatically detected. This is especially useful in a Node environment where these settings can't be detected (SSR) or for testing.\n\n#### Possible Keys\n\n`orientation`, `scan`, `aspectRatio`, `deviceAspectRatio`,\n`height`, `deviceHeight`, `width`, `deviceWidth`, `color`, `colorIndex`, `monochrome`,\n`resolution` and `type`\n\n##### Possible Types\n\n`type` can be one of: `all`, `grid`, `aural`, `braille`, `handheld`, `print`, `projection`,\n`screen`, `tty`, `tv` or `embossed`\n\nNote: The `device` property always applies, even when it can be detected (where window.matchMedia exists).\n\n```jsx\nimport { useMediaQuery } from 'react-responsive'\n\nconst Example = () =\u003e {\n  const isDesktopOrLaptop = useMediaQuery(\n    { minDeviceWidth: 1224 },\n    { deviceWidth: 1600 } // `device` prop\n  )\n\n  return (\n    \u003cdiv\u003e\n      {isDesktopOrLaptop \u0026\u0026 (\n        \u003cp\u003e\n          this will always get rendered even if device is shorter than 1224px,\n          that's because we overrode device settings with 'deviceWidth: 1600'.\n        \u003c/p\u003e\n      )}\n    \u003c/div\u003e\n  )\n}\n```\n\n#### Supplying through Context\n\nYou can also pass `device` to every `useMediaQuery` hook in the components tree through a React [Context](https://reactjs.org/docs/context.html).\nThis should ease up server-side-rendering and testing in a Node environment, e.g:\n\n##### Server-Side Rendering\n\n```jsx\nimport { Context as ResponsiveContext } from 'react-responsive'\nimport { renderToString } from 'react-dom/server'\nimport App from './App'\n\n...\n  // Context is just a regular React Context component, it accepts a `value` prop to be passed to consuming components\n  const mobileApp = renderToString(\n    \u003cResponsiveContext.Provider value={{ width: 500 }}\u003e\n      \u003cApp /\u003e\n    \u003c/ResponsiveContext.Provider\u003e\n  )\n...\n```\n\nIf you use next.js, structure your import like this to disable server-side rendering for components that use this library:\n\n```js\nimport dynamic from 'next/dynamic'\nconst MediaQuery = dynamic(() =\u003e import('react-responsive'), {\n  ssr: false\n})\n```\n\n##### Testing\n\n```jsx\nimport { Context as ResponsiveContext } from 'react-responsive'\nimport { render } from '@testing-library/react'\nimport ProductsListing from './ProductsListing'\n\ndescribe('ProductsListing', () =\u003e {\n  test('matches the snapshot', () =\u003e {\n    const { container: mobile } = render(\n      \u003cResponsiveContext.Provider value={{ width: 300 }}\u003e\n        \u003cProductsListing /\u003e\n      \u003c/ResponsiveContext.Provider\u003e\n    )\n    expect(mobile).toMatchSnapshot()\n\n    const { container: desktop } = render(\n      \u003cResponsiveContext.Provider value={{ width: 1000 }}\u003e\n        \u003cProductsListing /\u003e\n      \u003c/ResponsiveContext.Provider\u003e\n    )\n    expect(desktop).toMatchSnapshot()\n  })\n})\n```\n\nNote that if anything has a `device` prop passed in it will take precedence over the one from context.\n\n### `onChange`\n\nYou can use the `onChange` callback to specify a change handler that will be called when the media query's value changes.\n\n```jsx\nimport React from 'react'\nimport { useMediaQuery } from 'react-responsive'\n\nconst Example = () =\u003e {\n  const handleMediaQueryChange = (matches) =\u003e {\n    // matches will be true or false based on the value for the media query\n  }\n  const isDesktopOrLaptop = useMediaQuery(\n    { minWidth: 1224 },\n    undefined,\n    handleMediaQueryChange\n  )\n\n  return \u003cdiv\u003e...\u003c/div\u003e\n}\n```\n\n```jsx\nimport React from 'react'\nimport MediaQuery from 'react-responsive'\n\nconst Example = () =\u003e {\n  const handleMediaQueryChange = (matches) =\u003e {\n    // matches will be true or false based on the value for the media query\n  }\n\n  return (\n    \u003cMediaQuery minWidth={1224} onChange={handleMediaQueryChange}\u003e\n      ...\n    \u003c/MediaQuery\u003e\n  )\n}\n```\n\n## Easy Mode\n\nThat's it! Now you can create your application specific breakpoints and reuse them easily. Here is an example:\n\n```jsx\nimport { useMediaQuery } from 'react-responsive'\n\nconst Desktop = ({ children }) =\u003e {\n  const isDesktop = useMediaQuery({ minWidth: 992 })\n  return isDesktop ? children : null\n}\nconst Tablet = ({ children }) =\u003e {\n  const isTablet = useMediaQuery({ minWidth: 768, maxWidth: 991 })\n  return isTablet ? children : null\n}\nconst Mobile = ({ children }) =\u003e {\n  const isMobile = useMediaQuery({ maxWidth: 767 })\n  return isMobile ? children : null\n}\nconst Default = ({ children }) =\u003e {\n  const isNotMobile = useMediaQuery({ minWidth: 768 })\n  return isNotMobile ? children : null\n}\n\nconst Example = () =\u003e (\n  \u003cdiv\u003e\n    \u003cDesktop\u003eDesktop or laptop\u003c/Desktop\u003e\n    \u003cTablet\u003eTablet\u003c/Tablet\u003e\n    \u003cMobile\u003eMobile\u003c/Mobile\u003e\n    \u003cDefault\u003eNot mobile (desktop or laptop or tablet)\u003c/Default\u003e\n  \u003c/div\u003e\n)\n\nexport default Example\n```\n\nAnd if you want a combo (the DRY way):\n\n```js\nimport { useMediaQuery } from 'react-responsive'\n\nconst useDesktopMediaQuery = () =\u003e\n  useMediaQuery({ query: '(min-width: 1280px)' })\n\nconst useTabletAndBelowMediaQuery = () =\u003e\n  useMediaQuery({ query: '(max-width: 1279px)' })\n\nconst Desktop = ({ children }) =\u003e {\n  const isDesktop = useDesktopMediaQuery()\n\n  return isDesktop ? children : null\n}\n\nconst TabletAndBelow = ({ children }) =\u003e {\n  const isTabletAndBelow = useTabletAndBelowMediaQuery()\n\n  return isTabletAndBelow ? children : null\n}\n```\n\n## Browser Support\n\n### Out of the box\n\n\u003ctable\u003e\n\u003ctr\u003e\n\u003ctd\u003eChrome\u003c/td\u003e\n\u003ctd\u003e9\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eFirefox (Gecko)\u003c/td\u003e\n\u003ctd\u003e6\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eMS Edge\u003c/td\u003e\n\u003ctd\u003eAll\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eInternet Explorer\u003c/td\u003e\n\u003ctd\u003e10\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eOpera\u003c/td\u003e\n\u003ctd\u003e12.1\u003c/td\u003e\n\u003c/tr\u003e\n\u003ctr\u003e\n\u003ctd\u003eSafari\u003c/td\u003e\n\u003ctd\u003e5.1\u003c/td\u003e\n\u003c/tr\u003e\n\u003c/table\u003e\n\n### With Polyfills\n\nPretty much everything. Check out these polyfills:\n\n- [matchMedia.js by Paul Irish](https://github.com/paulirish/matchMedia.js/)\n- [media-match (faster, but larger and lacking some features)](https://github.com/weblinc/media-match)\n\n[downloads-image]: http://img.shields.io/npm/dm/react-responsive.svg\n[npm-url]: https://npmjs.org/package/react-responsive\n[npm-image]: http://img.shields.io/npm/v/react-responsive.svg\n","funding_links":["https://github.com/sponsors/contra"],"categories":["React","Code Design","Uncategorized","Packages","TypeScript"],"sub_categories":["React Components","CSS / Style","Uncategorized"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontra%2Freact-responsive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcontra%2Freact-responsive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcontra%2Freact-responsive/lists"}