{"id":18773519,"url":"https://github.com/farfetch/react-context-responsive","last_synced_at":"2025-04-13T09:12:25.575Z","repository":{"id":38174294,"uuid":"278120478","full_name":"Farfetch/react-context-responsive","owner":"Farfetch","description":"A package that provides a responsive context to your application, using React Context API.","archived":true,"fork":false,"pushed_at":"2023-12-20T14:20:56.000Z","size":456,"stargazers_count":27,"open_issues_count":0,"forks_count":11,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-13T09:12:19.529Z","etag":null,"topics":["context-api","css","farfetch","hacktoberfest","matchmedia","mediaqueries","mediaquery","mobile","react","reactjs","responsive","responsive-layout","viewport"],"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/Farfetch.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"docs/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-07-08T15:03:40.000Z","updated_at":"2025-03-23T17:45:29.000Z","dependencies_parsed_at":"2023-12-20T15:47:29.797Z","dependency_job_id":"4e550326-b8ab-4248-af17-79f58fa43345","html_url":"https://github.com/Farfetch/react-context-responsive","commit_stats":{"total_commits":47,"total_committers":15,"mean_commits":"3.1333333333333333","dds":0.7446808510638299,"last_synced_commit":"8f4b5ec884075e9ba6a978e60e880fdfeeb9124f"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Farfetch%2Freact-context-responsive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Farfetch%2Freact-context-responsive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Farfetch%2Freact-context-responsive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Farfetch%2Freact-context-responsive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Farfetch","download_url":"https://codeload.github.com/Farfetch/react-context-responsive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248688566,"owners_count":21145766,"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":["context-api","css","farfetch","hacktoberfest","matchmedia","mediaqueries","mediaquery","mobile","react","reactjs","responsive","responsive-layout","viewport"],"created_at":"2024-11-07T19:34:18.863Z","updated_at":"2025-04-13T09:12:25.553Z","avatar_url":"https://github.com/Farfetch.png","language":"JavaScript","readme":"# react-context-responsive\n\n\u003e This project is no longer being actively maintained.\nFARFETCH has decided to archive this project, as widely adopted alternatives, like [react-responsive](https://www.npmjs.com/package/react-responsive), have become available.\n\u003e \n\u003e We won't be accepting pull requests or responding to issues for this project anymore. Thank you for your understanding.\n\nA package that provides a responsive context to your application, using React Context API.\n\nIt has the same API of [`redux-responsive`](https://github.com/AlecAivazis/redux-responsive) and they are easily interchangeable.\n\n## Installation\n\n```bash\n$ yarn add @farfetch/react-context-responsive\n$ npm i @farfetch/react-context-responsive\n```\n\n...and include it in your project\n\n```js\nimport { ResponsiveProvider, useResponsive } from '@farfetch/react-context-responsive';\n```\n\n## Guidelines\n\n### Provider use\n\nThe app, ideally, should have only one `\u003cResponsiveProvider\u003e`, usually at `app.js`, wrapping all the components.\n\nYou can have as much consumers (`useResponsive`, `useIsMobile`, `Responsive`, `withResponsive` and `withIsMobile`) as you need. When the Provider value changes, all the consumers will update.\n\n### Preferred consumers\n\nThe hooks (`useResponsive` and `useIsMobile`) are the preferred method of using the context, when possible. \n\n### Mobile device detection\n\nWhen possible, use the `withIsMobile` and `useIsMobile` for mobile devices detection. In the future we might use it to automatically splitting of mobile-only code.\n\n## ResponsiveProvider Props\n| Prop               | Type    | Required | Default | Description                                                                   |\n| ------------------ | ------- | ---------|---------|-------------------------------------------------------------------------------|\n| initialMediaType   | '_initial' \u003cbr\u003e\u0026#124;\u0026nbsp; 'xs' \u003cbr\u003e\u0026#124;\u0026nbsp; 'sm' \u003cbr\u003e\u0026#124;\u0026nbsp; 'md' \u003cbr\u003e\u0026#124;\u0026nbsp; 'lg'  \u003cbr\u003e\u0026#124;\u0026nbsp;  'xl'| no    | 'xs'       |  Initial media type before the calculation of the real measures  |\n| defaultOrientation | 'landscape' \u003cbr\u003e\u0026#124;\u0026nbsp; 'portrait'  | no    | null       | Initial orientation before the calculation of the real measures    |\n| children           | node  | yes     | -       | React component |\n| breakpoints        | { xs: string, sm: string, md: string, lg: string, xl: string }  | no    | -       | Min breakpoints     |\n| breakpointsMax     | { xs: string, sm: string, md: string, lg: string, xl: string }  | no    | -       | Max breakpoints |\n| mediaQueries       | { _initial: string, xs: string, sm: string, md: string, lg: string, xl: string }  | no    | -       | Represents the screen media queries `(If this is passed, breakpoints and breakpointsMax props are obsolete)`  |\n| mobileBreakpoint   | '_initial' \u003cbr\u003e\u0026#124;\u0026nbsp; 'xs' \u003cbr\u003e\u0026#124;\u0026nbsp; 'sm' \u003cbr\u003e\u0026#124;\u0026nbsp; 'md' \u003cbr\u003e\u0026#124;\u0026nbsp; 'lg'  \u003cbr\u003e\u0026#124;\u0026nbsp;  'xl'  | no    | -       | It's considered mobile until this breakpoint |\n\n## Object returned by the useResponsive / withResponsive / Responsive:\n\n| Key                    | Type    | Description                                                                                  |\n|------------------------|---------|----------------------------------------------------------------------------------------------|\n| mediaType              | '_initial' \u003cbr\u003e\u0026#124;\u0026nbsp; 'xs' \u003cbr\u003e\u0026#124;\u0026nbsp; 'sm' \u003cbr\u003e\u0026#124;\u0026nbsp; 'md' \u003cbr\u003e\u0026#124;\u0026nbsp; 'lg'  \u003cbr\u003e\u0026#124;\u0026nbsp;  'xl'  | Current breakpoint name|\n| orientation            | string  | Current browser orientation |\n| isCalculated           | boolean | False on first render. Once true, it means all breakpoints values are based on the window. |\n| is                     | { _initial: boolean, xs: boolean, sm: boolean, md: boolean, lg: boolean, xl: boolean }  | Object key breakpoint name and value boolean that shows if width is at a certain breakpoint  |\n| lessThan               | { _initial: boolean, xs: boolean, sm: boolean, md: boolean, lg: boolean, xl: boolean }  | Object key breakpoint name and value boolean that shows if width is less than a certain breakpoint |\n| greaterThan               | { _initial: boolean, xs: boolean, sm: boolean, md: boolean, lg: boolean, xl: boolean }  | Object key breakpoint name and value boolean that shows if width is greater than a certain breakpoint |\n\n## Object returned by the useIsMobile / withIsMobile:\n\n| Key                    | Type    | Description                                                                                  |\n|------------------------|---------|----------------------------------------------------------------------------------------------|\n| isMobile | boolean | If it's below the mobile breakpoint defined by mobileBreakpoint |\n| isCalculated           | boolean | False on first render. Once true, it means all breakpoints values are based on the window. |\n   \n## Usage and examples\n\nTo use the package, you must embrace your code with the `ResponsiveProvider`, following the guidelines.\n\nThe component has five different exported consumption APIs:\n\n- `useResponsive`: A hook which returns the responsive object\n- `useIsMobile`: A hook which returns an object with `isMobile` and `isCalculated`\n- `Responsive`: A render prop component\n- `withResponsive`: A HoC which passes the responsive data to the `responsive` prop\n- `withIsMobile`: A HoC which passes `isMobile` and `isCalculated` props only\n\n### How to setup\n\nThere are two possible options to configure your responsive provider with `breakpoints` or with `mediaQueries`\n\nUsing `breakpoints` and `breakpointsMax`\n```js\nconst breakpoints = {\n  xs: \"320px\",\n  sm: \"576px\",\n  md: \"960px\",\n  lg: \"1280px\",\n  xl: \"1800px\"\n};\n\nconst breakpointsMax = {\n  xs: \"319px\",\n  sm: \"575px\",\n  md: \"959px\",\n  lg: \"1279px\",\n  xl: \"1799px\"\n};\n\nconst App = () =\u003e {\n    \n    return (\n        \u003cResponsiveProvider breakpoints={breakpoints} breakpointsMax={breakpointsMax}\u003e\n            \u003cContent /\u003e\n        \u003c/ResponsiveProvider\u003e\n    );\n};\n\nexport default App;\n```\n\nUsing `mediaQueries`\n```js\nconst mediaQueries = {\n  _initial: \"(min-width: 0px) and (max-width: 319px)\",\n  xs: \"(min-width: 320px) and (max-width: 575px)\",\n  sm: \"(min-width: 576px) and (max-width: 959px)\",\n  md: \"(min-width: 960px) and (max-width: 1279px)\",\n  lg: \"(min-width: 1280px) and (max-width: 1799px)\",\n  xl: \"(min-width: 1800px)\"\n};\n\nconst App = () =\u003e {\n    \n    return (\n        \u003cResponsiveProvider mediaQueries={mediaQueries}\u003e\n            \u003cContent /\u003e\n        \u003c/ResponsiveProvider\u003e\n    );\n};\n\nexport default App;\n```\n\n### How to consume the package\n\n#### Rendering components with `useResponsive` hook. (Preferred method)\n\n```js\nconst Greetings = () =\u003e {\n    const { lessThan } = useResponsive();\n    \n    if (lessThan.sm) {\n        return (\u003cp\u003eHello small screen!\u003c/p\u003e);\n    }\n    \n    return (\u003cp\u003eHello medium/big screen!\u003c/p\u003e);\n};\n\nexport default Greetings;\n```\n\n#### Rendering components with `useIsMobile` hook. (Preferred method)\n\n```js\nconst Greetings = () =\u003e {\n    const { isMobile } = useIsMobile();\n    \n    if (isMobile) {\n        return (\u003cp\u003eHello mobile!\u003c/p\u003e);\n    }\n    \n    return (\u003cp\u003eHello desktop!\u003c/p\u003e);\n};\n\nexport default Greetings;\n```\n\n#### Rendering components with `Responsive` render prop component\n\n```js\n\nclass Greetings extends Component {\n    render() {\n        return (\n            \u003cResponsiveProvider\u003e\n                \u003cContent\u003e\n                    \u003cResponsive\u003e\n                        { (responsive) =\u003e ( \u003cComponent1 currentBreakpoint={ responsive.mediaType } /\u003e ) }\n                    \u003c/Responsive\u003e\n                    \u003cResponsive\u003e\n                        { (responsive) =\u003e ( \u003cComponent2 orientation={ responsive.orientation } /\u003e ) }\n                    \u003c/Responsive\u003e\n                \u003c/Content\u003e\n            \u003c/ResponsiveProvider\u003e\n        )\n    }\n}\n\nexport default Greetings;\n```\n\n#### Rendering components with `withResponsive` High-Order component\n\n```js\nclass Greetings extends Component {\n    render() {\n        return this.props.responsive.lessThan.sm ? \u003cp\u003eHello small screen!\u003c/p\u003e : \u003cp\u003eHello big/small screen!\u003c/p\u003e\n    }\n}\n\nexport default withResponsive(Greetings);\n```\n\n#### Rendering components with `withIsMobile` High-Order component\n\n```js\nclass Greetings extends Component {\n    render() {\n        return this.props.isMobile ? \u003cp\u003eHello mobile!\u003c/p\u003e : \u003cp\u003eHello desktop!\u003c/p\u003e\n    }\n}\n\nexport default withIsMobile(Greetings);\n```\n\n## Additional notes\n\n### The `_initial` media type\n\nThe gap between window width 0 and the first breakpoint is called `_initial` media type.\n\nIt fixes a problem at `redux-responsive` in the calculation: \n\nIf the first breakpoint starts in a number bigger than 0 (let's call it X), it considers that everything between 0 and X as the first breakpoint when it's not true.\n\nFor example, our breakpoints start at 320 (XS), `redux-responsive` considers 270 as XS, a wrong calculation. We call it `_initial`.\n\n## React compatibility\n\nReact \u003e= `16.8.0` is required to use this package as the `ResponsiveProvider` is hook-based. \n\nThe non-hook APIs just expose the `useResponsive` hook with different APIs, for compatibility with class components.\n\n## Contributing\n\nRead the [Contributing guidelines](./docs/CONTRIBUTING.md)\n\n### Disclaimer\n\nBy sending us your contributions, you are agreeing that your contribution is made subject to the terms of our [Contributor Ownership Statement](https://github.com/Farfetch/.github/blob/master/COS.md)\n\n## Maintainers\n\n* [dinospereira](https://github.com/dinospereira)\n* [SoaresMG](https://github.com/SoaresMG)\n* [sofiacteixeira](https://github.com/sofiacteixeira)\n* [themariamarques](https://github.com/themariamarques)\n\n## License\n\n[MIT](./LICENSE) ","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarfetch%2Freact-context-responsive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffarfetch%2Freact-context-responsive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffarfetch%2Freact-context-responsive/lists"}