{"id":19856883,"url":"https://github.com/malte-wessel/react-matchmedia-connect","last_synced_at":"2025-05-02T02:30:25.751Z","repository":{"id":57164783,"uuid":"51655004","full_name":"malte-wessel/react-matchmedia-connect","owner":"malte-wessel","description":"Higher order components for matchMedia","archived":false,"fork":false,"pushed_at":"2017-10-26T13:47:31.000Z","size":274,"stargazers_count":50,"open_issues_count":3,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-18T22:52:33.968Z","etag":null,"topics":["breakpoint","matchmedia","reactjs","responsive"],"latest_commit_sha":null,"homepage":"http://malte-wessel.github.io/react-matchmedia-connect/","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/malte-wessel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-02-13T16:52:21.000Z","updated_at":"2023-12-19T17:38:35.000Z","dependencies_parsed_at":"2022-08-29T19:11:49.828Z","dependency_job_id":null,"html_url":"https://github.com/malte-wessel/react-matchmedia-connect","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malte-wessel%2Freact-matchmedia-connect","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malte-wessel%2Freact-matchmedia-connect/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malte-wessel%2Freact-matchmedia-connect/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/malte-wessel%2Freact-matchmedia-connect/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/malte-wessel","download_url":"https://codeload.github.com/malte-wessel/react-matchmedia-connect/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251972402,"owners_count":21673599,"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":["breakpoint","matchmedia","reactjs","responsive"],"created_at":"2024-11-12T14:16:51.948Z","updated_at":"2025-05-02T02:30:25.461Z","avatar_url":"https://github.com/malte-wessel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"react-matchmedia-connect\n=========================\n\n[![npm](https://img.shields.io/badge/npm-react--matchmedia--connect-brightgreen.svg?style=flat-square)]()\n[![npm version](https://img.shields.io/npm/v/react-matchmedia-connect.svg?style=flat-square)](https://www.npmjs.com/package/react-matchmedia-connect)\n[![npm downloads](https://img.shields.io/npm/dm/react-matchmedia-connect.svg?style=flat-square)](https://www.npmjs.com/package/react-matchmedia-connect)\n\n* [Higher order components](https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750#.9apqrmudz) for the [matchMedia](https://developer.mozilla.org/de/docs/Web/API/Window/matchMedia) API\n* Receive props that indicate whether your media queries match\n\n**[Check out the demo](http://malte-wessel.github.io/react-matchmedia-connect/)**\n\n## Installation\n```bash\nnpm install react-matchmedia-connect --save\n```\n\n## Usage\n### createMatchMediaConnect\n\n`createMatchMediaConnect` lets you register a set of [media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). If one of the queries changes, you component will be updated.\n\n```javascript\nimport { createMatchMediaConnect } from 'react-matchmedia-connect';\n\n// Define some media queries and give them a key\nconst connect = createMatchMediaConnect({\n  isLandscape: '(orientation: landscape)',\n  isMin400: '(min-width: 400px)',\n  isTablet: '(min-width: 700px), handheld and (orientation: landscape)'\n});\n```\nThen use this connect function throughout your app:\n```javascript\nconst Component = ({ isLandscape, isMin400 }) =\u003e (\n  \u003cdiv\u003e\n    \u003cdiv\u003e{isLandscape ? 'landscape' : 'portrait'}\u003c/div\u003e\n    \u003cdiv\u003e{isMin400 ? 'at least 400' : 'less than 400'}\u003c/div\u003e\n  \u003c/div\u003e\n);\n// This component only needs `isLandscape` and `isMin400`\nconst ConnectedComponent = connect(['isLandscape', 'isMin400'])(Component);\n```\n```javascript\nconst OtherComponent = ({ isTablet }) =\u003e (\n  isTablet ? \u003cdiv\u003eTablet\u003c/div\u003e : \u003cdiv\u003eNo tablet\u003c/div\u003e\n);\n// This component only needs `isTablet`\nconst OtherConnectedComponent = connect(['isTablet'])(Component);\n\n```\n\n### createResponsiveConnect\n\n`createResponsiveConnect` expects a list of breakpoints and creates the respective media queries with `createMatchMediaConnect`. You'll get a `isMin\u003cSize\u003e` and `isMax\u003cSize\u003e` property for each breakpoint as well as a `isPortrait` and `isLandscape` property.\n\n```javascript\nimport { createResponsiveConnect } from 'react-matchmedia-connect';\nconst connect = createResponsiveConnect({\n  xs: 480,\n  sm: 768,\n  md: 992,\n  lg: 1200\n});\n```\n```javascript\nconst Component = ({ isMinMd, isMaxMd }) =\u003e (\n  \u003cdiv\u003e\n    \u003cdiv\u003e{isMinMd ? 'greater than 992px' : 'less than 992px'}\u003c/div\u003e\n    \u003cdiv\u003e{isMaxMd ? 'less than 1200px' : 'greater than 1199px'}\u003c/div\u003e\n    \u003cdiv\u003e{isMinMd \u0026\u0026 isMaxMd ? 'between 992px and 1199px' : 'other'}\u003c/div\u003e\n  \u003c/div\u003e\n);\n// Only connect to `isMinMd` and `isMaxMd`\nconst ConnectedComponent = connect(['isMinMd', 'isMaxMd'])(Component);\n```\n\n## API\n### `createMatchMediaConnect(mediaQueries)`\n* `mediaQueries` (Object): A set of media queries.\n* `returns` (Function): **[connect](#connectproperties)** function that connects your components to changes\n\n```javascript\nconst connect = createMatchMediaConnect({\n  isLandscape: '(orientation: landscape)',\n  isMin400: '(min-width: 400px)'\n});\n```\n##### `connect(properties)`\n* `properties` (Array): An array of properties that your component should receive\n* `returns` (Function): **[wrapWithConnect](#wrapwithconnectcomponent)** higher order function\n\n```javascript\nconst wrapWithConnect = connect(['isMin400']);\n```\n\n##### `wrapWithConnect(Component)`\n* `Component` (Component): The component that you want to connect\n* `returns` (Component): Connected component\n\n```javascript\nconst Component = ({ isMin400 }) =\u003e (\n  \u003cdiv\u003e{isMin400 ? 'at least 400' : 'less than 400'}\u003c/div\u003e\n);\n// This component only needs `isLandscape` and `isMin400`\nconst ConnectedComponent = wrapWithConnect(Component);\n```\n\n### `createResponsiveConnect(breakpoints)`\n* `breakpoints` (Object): A set of breakpoints\n* `returns` (Function): **[connect](#connectproperties)** function that connects your components to changes\n\n*Default breakpoints:*\n```javascript\nconst defaultBreakpoints = {\n  xs: 480,\n  sm: 768,\n  md: 992,\n  lg: 1200\n};\n```\n\n## Examples\n\nRun the simple example:\n```bash\n# Make sure that you've installed the dependencies\nnpm install\n# Move to example directory\ncd react-matchmedia-connect/examples/simple\nnpm install\nnpm start\n```\n\n## Tests\n```bash\n# Make sure that you've installed the dependencies\nnpm install\n# Run tests\nnpm test\n```\n\n### Code Coverage\n```bash\n# Run code coverage. Results can be found in `./coverage`\nnpm run test:cov\n```\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalte-wessel%2Freact-matchmedia-connect","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmalte-wessel%2Freact-matchmedia-connect","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmalte-wessel%2Freact-matchmedia-connect/lists"}