{"id":13450810,"url":"https://github.com/streamich/use-media","last_synced_at":"2025-08-12T08:06:15.888Z","repository":{"id":34099225,"uuid":"155987757","full_name":"streamich/use-media","owner":"streamich","description":"useMedia React hook to track CSS media query state","archived":false,"fork":false,"pushed_at":"2025-08-01T03:41:36.000Z","size":965,"stargazers_count":523,"open_issues_count":26,"forks_count":25,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-08-09T18:32:17.234Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"unlicense","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/streamich.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,"zenodo":null},"funding":{"github":"streamich"}},"created_at":"2018-11-03T13:54:28.000Z","updated_at":"2025-08-01T03:41:39.000Z","dependencies_parsed_at":"2023-01-15T04:45:25.075Z","dependency_job_id":"9f6e24dd-bac0-4c31-a1d4-f901e79861f9","html_url":"https://github.com/streamich/use-media","commit_stats":{"total_commits":203,"total_committers":12,"mean_commits":"16.916666666666668","dds":"0.33990147783251234","last_synced_commit":"209b0dc31831a7d6ee5bc5b86c471a941d8e9169"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"purl":"pkg:github/streamich/use-media","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fuse-media","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fuse-media/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fuse-media/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fuse-media/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/streamich","download_url":"https://codeload.github.com/streamich/use-media/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/streamich%2Fuse-media/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269814273,"owners_count":24479358,"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-08-10T02:00:08.965Z","response_time":71,"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":[],"created_at":"2024-07-31T07:00:38.797Z","updated_at":"2025-08-12T08:06:15.800Z","avatar_url":"https://github.com/streamich.png","language":"TypeScript","funding_links":["https://github.com/sponsors/streamich"],"categories":["Packages","TypeScript"],"sub_categories":[],"readme":"# use-media\n\n`useMedia` React sensor hook that tracks state of a CSS media query.\n\n## Install\n\nYou can install `use-media` with npm\n\n```bash\nnpm install --save use-media\n```\n\nor with yarn\n```bash\nyarn add use-media\n```\n\n## Usage\n\nWith `useEffect`\n\n```jsx\nimport useMedia from 'use-media';\n// Alternatively, you can import as:\n// import {useMedia} from 'use-media';\n\nconst Demo = () =\u003e {\n  // Accepts an object of features to test\n  const isWide = useMedia({minWidth: '1000px'});\n  // Or a regular media query string\n  const reduceMotion = useMedia('(prefers-reduced-motion: reduce)');\n\n  return (\n    \u003cdiv\u003e\n      Screen is wide: {isWide ? '😃' : '😢'}\n    \u003c/div\u003e\n  );\n};\n```\n\nWith `useLayoutEffect`\n\n```jsx\nimport {useMediaLayout} from 'use-media';\n\nconst Demo = () =\u003e {\n  // Accepts an object of features to test\n  const isWide = useMediaLayout({minWidth: '1000px'});\n  // Or a regular media query string\n  const reduceMotion = useMediaLayout('(prefers-reduced-motion: reduce)');\n\n  return (\n    \u003cdiv\u003e\n      Screen is wide: {isWide ? '😃' : '😢'}\n    \u003c/div\u003e\n  );\n};\n```\n\n## Testing\n\nDepending on your testing setup, you may need to mock `window.matchMedia` on components that utilize the `useMedia` hook. Below is an example of doing this in `jest`:\n\n**`/test-utilities/index.ts`**\n\n```jsx\nimport {mockMediaQueryList} from 'use-media/lib/useMedia';\n// Types are also exported for convienence:\n// import {Effect, MediaQueryObject} from 'use-media/lib/types';\n\nexport interface MockMatchMedia {\n  media: string;\n  matches?: boolean;\n}\n\nfunction getMockImplementation({media, matches = false}: MockMatchMedia) {\n  const mql: MediaQueryList = {\n    ...mockMediaQueryList,\n    media,\n    matches,\n  };\n\n  return () =\u003e mql;\n}\n\nexport function jestMockMatchMedia({media, matches = false}: MockMatchMedia) {\n  const mockedImplementation = getMockImplementation({media, matches});\n  window.matchMedia = jest.fn().mockImplementation(mockedImplementation);\n}\n```\n\n**`/components/MyComponent/MyComponent.test.tsx`**\n\n```jsx\nconst mediaQueries = {\n  mobile: '(max-width: 767px)',\n  prefersReducedMotion: '(prefers-reduced-motion: reduce)',\n};\n\ndescribe('\u003cMyComponent /\u003e', () =\u003e {\n  const defaultProps: Props = {\n    duration: 100,\n  };\n\n  afterEach(() =\u003e {\n    jestMockMatchMedia({\n      media: mediaQueries.prefersReducedMotion,\n      matches: false,\n    });\n  });\n\n  it('sets `duration` to `0` when user-agent `prefers-reduced-motion`', () =\u003e {\n    jestMockMatchMedia({\n      media: mediaQueries.prefersReducedMotion,\n      matches: true,\n    });\n\n    const wrapper = mount(\u003cMyComponent {...defaultProps} /\u003e);\n    const child = wrapper.find(TransitionComponent);\n\n    expect(child.prop('duration')).toBe(0);\n  });\n});\n```\n\n## Storing in Context\n\nDepending on your app, you may be using the `useMedia` hook to register many `matchMedia` listeners across multiple components. It may help to elevate these listeners to `Context`.\n\n**`/components/MediaQueryProvider/MediaQueryProvider.tsx`**\n\n```jsx\nimport React, {createContext, useContext, useMemo} from 'react';\nimport useMedia from 'use-media';\n\ninterface Props {\n  children: React.ReactNode;\n}\n\nexport const MediaQueryContext = createContext(null);\n\nconst mediaQueries = {\n  mobile: '(max-width: 767px)',\n  prefersReducedMotion: '(prefers-reduced-motion: reduce)',\n};\n\nexport default function MediaQueryProvider({children}: Props) {\n  const mobileView = useMedia(mediaQueries.mobile);\n  const prefersReducedMotion = useMedia(mediaQueries.prefersReducedMotion);\n  const value = useMemo(() =\u003e ({mobileView, prefersReducedMotion}), [\n    mobileView,\n    prefersReducedMotion,\n  ]);\n\n  return (\n    \u003cMediaQueryContext.Provider value={value}\u003e\n      {children}\n    \u003c/MediaQueryContext.Provider\u003e\n  );\n}\n\nexport function useMediaQueryContext() {\n  return useContext(MediaQueryContext);\n}\n```\n\n**`/components/App/App.tsx`**\n\n```jsx\nimport React from 'react';\nimport MediaQueryProvider from '../MediaQueryProvider';\nimport MyComponent from '../MyComponent';\n\nexport default function App() {\n  return (\n    \u003cMediaQueryProvider\u003e\n      \u003cdiv id=\"MyApp\"\u003e\n        \u003cMyComponent /\u003e\n      \u003c/div\u003e\n    \u003c/MediaQueryProvider\u003e\n  );\n}\n```\n\n**`/components/MyComponent/MyComponent.tsx`**\n\n```jsx\nimport React from 'react';\nimport {useMediaQueryContext} from '../MediaQueryProvider';\n\nexport default function MyComponent() {\n  const {mobileView, prefersReducedMotion} = useMediaQueryContext();\n\n  return (\n    \u003cdiv\u003e\n      \u003cp\u003emobileView: {Boolean(mobileView).toString()}\u003c/p\u003e\n      \u003cp\u003eprefersReducedMotion: {Boolean(prefersReducedMotion).toString()}\u003c/p\u003e\n    \u003c/div\u003e\n  );\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamich%2Fuse-media","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstreamich%2Fuse-media","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstreamich%2Fuse-media/lists"}