{"id":16611440,"url":"https://github.com/andreasarvidsson/openwebproject-responsivereact","last_synced_at":"2025-03-10T18:26:44.815Z","repository":{"id":57317278,"uuid":"282847694","full_name":"AndreasArvidsson/OpenWebProject-ResponsiveReact","owner":"AndreasArvidsson","description":"Responsive layout for React","archived":false,"fork":false,"pushed_at":"2020-07-27T09:46:42.000Z","size":8,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-19T06:19:52.394Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/AndreasArvidsson.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-07-27T09:10:12.000Z","updated_at":"2020-07-27T09:46:06.000Z","dependencies_parsed_at":"2022-08-25T20:40:50.334Z","dependency_job_id":null,"html_url":"https://github.com/AndreasArvidsson/OpenWebProject-ResponsiveReact","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/AndreasArvidsson%2FOpenWebProject-ResponsiveReact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreasArvidsson%2FOpenWebProject-ResponsiveReact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreasArvidsson%2FOpenWebProject-ResponsiveReact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AndreasArvidsson%2FOpenWebProject-ResponsiveReact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AndreasArvidsson","download_url":"https://codeload.github.com/AndreasArvidsson/OpenWebProject-ResponsiveReact/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242901439,"owners_count":20203939,"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":[],"created_at":"2024-10-12T01:37:31.322Z","updated_at":"2025-03-10T18:26:44.775Z","avatar_url":"https://github.com/AndreasArvidsson.png","language":"JavaScript","readme":"# OpenWebProject ResponsiveReact\n\n**Responsive layout for React**\n\nBased upon the size of the screen (or more specifically the browser window) do conditionally rendering. Makes it possible to have different layouts for different screen/window sizes.\n\n## Installation\n`npm install owp.responsive-react --save`\n\n## Screen sizes\nI'm using the screen sizes as defined by [Bootstrap](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)\n\n* xs - Extra small devices (portrait phones, less than 576px)\n* sm - Small devices (landscape phones, 576px and up)\n* md - Medium devices (tablets, 768px and up)\n* lg - Large devices (desktops, 992px and up)\n* xl - Extra large devices (large desktops, 1200px and up)\n\n## Usage\nAdd the provider at the top of your application.\n```jsx\nimport { ResponsiveProvider } from \"owp.responsive-react\";\n\nReactDOM.render(\n    \u003cResponsiveProvider\u003e\n        \u003cApp /\u003e\n    \u003c/ResponsiveProvider\u003e,\n    document.getElementById(\"root\")\n);\n```\n\nConditional render based upon screen/window size.\n```jsx\nimport Responsive, { XS, SM, MD, LG, XL } from \"owp.responsive-react\";\n\n//Render div if screen/window size is md(Medium) or larger.\n\u003cResponsive min=\"md\"\u003e\n    \u003cdiv\u003emin md\u003c/div\u003e\n\u003c/Responsive\u003e\n\n//Render div if screen/window size is md(Medium) or smaller.\n\u003cResponsive max=\"md\"\u003e\n    \u003cdiv\u003emax md\u003c/div\u003e\n\u003c/Responsive\u003e\n\n//Render div if screen/window width is 500px or more.\n\u003cResponsive minWidth={500}\u003e\n    \u003cdiv\u003eminWidth 500\u003c/div\u003e\n\u003c/Responsive\u003e\n\n//Render div if screen/window width is 500px or less.\n\u003cResponsive maxWidth={500}\u003e\n    \u003cdiv\u003emaxWidth 500\u003c/div\u003e\n\u003c/Responsive\u003e\n\n//Render div if screen/window height is 300px or more.\n\u003cResponsive minHeight={300}\u003e\n    \u003cdiv\u003eminHeight 300\u003c/div\u003e\n\u003c/Responsive\u003e\n\n//Render div if screen/window height is 300px or less.\n\u003cResponsive maxHeight={300}\u003e\n    \u003cdiv\u003emaxHeight 300\u003c/div\u003e\n\u003c/Responsive\u003e\n\n//Render div if screen/window is in portrait mode(height \u003e= width).\n\u003cResponsive isPortrait={true}\u003e\n    \u003cdiv\u003eisPortrait\u003c/div\u003e\n\u003c/Responsive\u003e\n\n//Render div if screen/window is in landscape mode(height \u003c width).\n\u003cResponsive isLandscape={true}\u003e\n    \u003cdiv\u003eisLandscape\u003c/div\u003e\n\u003c/Responsive\u003e\n\n//Render best matching layout based upon screen/window size.\n\u003cResponsive\u003e\n    \u003cXS\u003e\u003cdiv\u003eExtra small\u003c/div\u003e\u003c/XS\u003e\n    \u003cSM\u003e\u003cdiv\u003eSmall\u003c/div\u003e\u003c/SM\u003e\n    \u003cMD\u003e\u003cdiv\u003eMedium\u003c/div\u003e\u003c/MD\u003e\n    \u003cLG\u003e\u003cdiv\u003eLarge\u003c/div\u003e\u003c/LG\u003e\n    \u003cXL\u003e\u003cdiv\u003eExtra large\u003c/div\u003e\u003c/XL\u003e\n\u003c/Responsive\u003e\n\n//Can be combined with a condition. Will render the best match, but only in portrait mode.\n\u003cResponsive isPortrait={true}\u003e\n    \u003cXS\u003e\u003cdiv\u003eExtra small\u003c/div\u003e\u003c/XS\u003e\n    \u003cSM\u003e\u003cdiv\u003eSmall\u003c/div\u003e\u003c/SM\u003e\n    \u003cMD\u003e\u003cdiv\u003eMedium\u003c/div\u003e\u003c/MD\u003e\n    \u003cLG\u003e\u003cdiv\u003eLarge\u003c/div\u003e\u003c/LG\u003e\n    \u003cXL\u003e\u003cdiv\u003eExtra large\u003c/div\u003e\u003c/XL\u003e\n\u003c/Responsive\u003e\n```","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasarvidsson%2Fopenwebproject-responsivereact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fandreasarvidsson%2Fopenwebproject-responsivereact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fandreasarvidsson%2Fopenwebproject-responsivereact/lists"}