{"id":21515892,"url":"https://github.com/eloytoro/react-screen-size","last_synced_at":"2025-04-09T20:14:57.216Z","repository":{"id":57344096,"uuid":"74857587","full_name":"eloytoro/react-screen-size","owner":"eloytoro","description":null,"archived":false,"fork":false,"pushed_at":"2018-03-22T10:59:09.000Z","size":12,"stargazers_count":10,"open_issues_count":0,"forks_count":2,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-04-04T08:43:37.664Z","etag":null,"topics":["hoc","media","media-queries","react","screen","size"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/eloytoro.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-11-27T00:06:33.000Z","updated_at":"2020-07-02T01:10:44.000Z","dependencies_parsed_at":"2022-09-12T06:51:02.455Z","dependency_job_id":null,"html_url":"https://github.com/eloytoro/react-screen-size","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eloytoro%2Freact-screen-size","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eloytoro%2Freact-screen-size/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eloytoro%2Freact-screen-size/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/eloytoro%2Freact-screen-size/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/eloytoro","download_url":"https://codeload.github.com/eloytoro/react-screen-size/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247601449,"owners_count":20964866,"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":["hoc","media","media-queries","react","screen","size"],"created_at":"2024-11-23T23:57:15.950Z","updated_at":"2025-04-09T20:14:57.195Z","avatar_url":"https://github.com/eloytoro.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Status](https://travis-ci.org/eloytoro/react-screen-size.svg?branch=master)](https://travis-ci.org/eloytoro/react-screen-size)\n[![npm version](https://badge.fury.io/js/react-screen-size.svg)](https://badge.fury.io/js/react-screen-size)\n\n## react-screen-size\n\nA HoC to connect your components to screen size changes\n\n### Older versions\n\n* [v1.x](https://github.com/eloytoro/react-screen-size/tree/v1.x)\n\n### Why would you need this\n\nIf your component logic depends on screen size then you need this.\n\n\n### Quick Example\n\n```jsx\nconst Container = ({ isTablet, isMobile, isDesktop }) =\u003e (\n  ...\n)\n\nconst mapScreenSizeToProps = ({ sm, xs, gtXs }) =\u003e {\n  return {\n    isTablet: sm,\n    isMobile: xs,\n    isDesktop: gtSm\n  }\n}\n\nexport default connectScreenSize(mapScreenSizeToProps)(Container);\n```\n\n## API\n\n### \u003cMediaProvider [medias] [screenSize]\u003e\n\nComponents declared inside of a `MediaProvider` will be listening to screen changes.\n\n#### Props\n\n* `medias` (_Object?_): Extend definitions for screen size criterias. Default values are:\n\n```javascript\n{\n  xs:   '(max-width: 600px)',\n  sm:   '(max-width: 960px) and (min-width: 601px)',\n  md:   '(max-width: 1280px) and (min-width: 961px)',\n  lg:   '(max-width: 1920px) and (min-width: 1281px)',\n  gtXs: '(min-width: 601px)',\n  gtSm: '(min-width: 961px)',\n  gtMd: '(min-width: 1281px)',\n  gtLg: '(min-width: 1921px)',\n}\n```\n\n* `screenSize` (_Object?_): Set initial value of the screenSize passed to connected components,\nuseful this for server side rendering. Default values are:\n\n```javascript\n{\n  xs:   false,\n  gtXs: true,\n  sm:   false,\n  gtSm: true,\n  md:   true,\n  gtMd: true,\n  lg:   false,\n  gtLg: false\n}\n```\n\n### `connectScreenSize(mapScreenSizeToProps)`\n\nSubscribes a React component to screen size changes.\n\n#### Arguments\n\n* `mapScreenSizeToProps(screenSize): screenSizeProps` (_Function_): Any time the screen size updates\n`mapScreenSizeToProps` will be called with the active media queries as an object structure, these\nare the possible values\n  * `screenSize.xs`\n  * `screenSize.sm`\n  * `screenSize.md`\n  * `screenSize.lg`\n  * `screenSize.gtXs`\n  * `screenSize.gtSm`\n  * `screenSize.gtMd`\n  * `screenSize.gtLg`\n\n#### Returns\n\nA react component that will inject the resulting object of calls to `mapScreenSizeToProps` as props\ninto your component\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feloytoro%2Freact-screen-size","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Feloytoro%2Freact-screen-size","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Feloytoro%2Freact-screen-size/lists"}