{"id":26242548,"url":"https://github.com/wimpyprogrammer/react-responsive-breakpoints","last_synced_at":"2025-04-23T12:59:03.531Z","repository":{"id":25025880,"uuid":"103006279","full_name":"wimpyprogrammer/react-responsive-breakpoints","owner":"wimpyprogrammer","description":"A higher-order React component to translate CSS breakpoints into properties","archived":false,"fork":false,"pushed_at":"2024-12-06T06:12:37.000Z","size":155,"stargazers_count":2,"open_issues_count":21,"forks_count":1,"subscribers_count":3,"default_branch":"develop","last_synced_at":"2025-03-29T23:51:09.542Z","etag":null,"topics":["component","higher-order-component","react","responsive"],"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/wimpyprogrammer.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-10T05:32:07.000Z","updated_at":"2022-03-16T00:56:47.000Z","dependencies_parsed_at":"2023-11-29T15:27:48.258Z","dependency_job_id":"aa4e0fcf-045b-413d-9fcf-e0d0f72c9edc","html_url":"https://github.com/wimpyprogrammer/react-responsive-breakpoints","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wimpyprogrammer%2Freact-responsive-breakpoints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wimpyprogrammer%2Freact-responsive-breakpoints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wimpyprogrammer%2Freact-responsive-breakpoints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wimpyprogrammer%2Freact-responsive-breakpoints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wimpyprogrammer","download_url":"https://codeload.github.com/wimpyprogrammer/react-responsive-breakpoints/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250117381,"owners_count":21377618,"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":["component","higher-order-component","react","responsive"],"created_at":"2025-03-13T09:52:21.150Z","updated_at":"2025-04-23T12:59:03.508Z","avatar_url":"https://github.com/wimpyprogrammer.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-responsive-breakpoints\n\n[![npm package](https://badge.fury.io/js/react-responsive-breakpoints.svg)](https://badge.fury.io/js/react-responsive-breakpoints)\n![node version](https://img.shields.io/node/v/react-responsive-breakpoints.svg)\n[![Build Status](https://travis-ci.org/wimpyprogrammer/react-responsive-breakpoints.svg?branch=main)](https://travis-ci.org/wimpyprogrammer/react-responsive-breakpoints)\n[![codecov](https://codecov.io/gh/wimpyprogrammer/react-responsive-breakpoints/branch/main/graph/badge.svg)](https://codecov.io/gh/wimpyprogrammer/react-responsive-breakpoints)\n[![Known Vulnerabilities](https://snyk.io/test/github/wimpyprogrammer/react-responsive-breakpoints/badge.svg)](https://snyk.io/test/github/wimpyprogrammer/react-responsive-breakpoints)\n\n[![Build Status](https://saucelabs.com/browser-matrix/wimpyprogrammer.svg)](https://saucelabs.com/beta/builds/0645fda2076745e390ca9b938c2dc721)\n\nA higher-order React component to translate CSS breakpoints into properties.\n\nLibraries like [`react-responsive`](https://www.npmjs.com/package/react-responsive) and [`react-responsive-component`](https://www.npmjs.com/package/react-responsive-component) let you specify media queries in your React code.  But if you're using a responsive CSS framework like [Bootstrap](https://getbootstrap.com/), [Foundation](https://foundation.zurb.com/), or even a homegrown one, you probably want your React components to mirror your existing CSS breakpoints without duplicating them in JavaScript.\n\n## [Demo on CodeSandbox]((https://codesandbox.io/s/1vwkk6rml3?module=%2FResponsiveButton.js))\n\n[![react-responsive-breakpoints Demo](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/1vwkk6rml3?module=%2FResponsiveButton.js)\n\n## Installation\n\nPublished on `npm` as [`react-responsive-breakpoints`](https://www.npmjs.com/package/react-responsive-breakpoints).\n\nnpm users:\n```\nnpm install --save react-responsive-breakpoints\n```\n\nyarn users:\n```\nyarn add react-responsive-breakpoints\n```\n\n`react-responsive-breakpoints` does not include its own version of React.  It will use whatever version is already installed in your project.\n\nThen add a DOM element for each breakpoint size in your application.  Each DOM element should only appear at its respective breakpoint.  For example, if your application uses Bootstrap v3.3, add [responsive elements](https://getbootstrap.com/docs/3.3/css/#responsive-utilities) like:\n\n```html\n\u003cdiv class=\"visible-xs-block\" id=\"marker-xs\"\u003e\u003c/div\u003e\n\u003cdiv class=\"visible-sm-block\" id=\"marker-sm\"\u003e\u003c/div\u003e\n\u003cdiv class=\"visible-md-block\" id=\"marker-md\"\u003e\u003c/div\u003e\n\u003cdiv class=\"visible-lg-block\" id=\"marker-lg\"\u003e\u003c/div\u003e\n```\n\nFor best results, create these responsive DOM markers outside of the React application so they are ready as soon as `react-responsive-breakpoints` needs them.\n\n## Usage\n\nUse `withBreakpointsCustom(options, Component)` to create a higher-order component around your custom React component.\n- `options` (Object) - your responsive configuration options\n\t- `options.breakpoints` (Array) - An array of objects.  Each object specifies a responsive breakpoint and contains two properties:\n\t\t- `prop` (String) - The name of the property that will be passed to `Component` indicating whether the breakpoint is active\n\t\t- `selector` (String) - A CSS selector for the DOM marker that appears at the breakpoint, e.g. `\"#some-id\"` or `\".some-class\"`\n- `Component` (ReactElement) - Your React component\n\n```js\nimport React from 'react';\nimport { withBreakpointsCustom } from 'react-responsive-breakpoints';\n\n/**\n * The \"isSize*\" properties will be automatically set by react-responsive-breakpoints.\n * All other properties pass through as usual.\n */\nconst MyComponent = ({ counter, isSizeXs, isSizeSm, isSizeMd, isSizeLg, onIncrement }) =\u003e {\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t{counter}\n\t\t\t\u003cbutton type=\"button\" onClick={onIncrement}\u003eIncrement\u003c/button\u003e\n\t\t\t{/* Display custom content depending on the screen width */}\n\t\t\t{isSizeXs ? (\n\t\t\t\t\u003cdiv\u003eX-small screen content\u003c/div\u003e\n\t\t\t) : null}\n\t\t\t{isSizeSm ? (\n\t\t\t\t\u003cdiv\u003eSmall screen content\u003c/div\u003e\n\t\t\t) : null}\n\t\t\t{isSizeMd ? (\n\t\t\t\t\u003cdiv\u003eMedium screen content\u003c/div\u003e\n\t\t\t) : null}\n\t\t\t{isSizeLg ? (\n\t\t\t\t\u003cdiv\u003eLarge screen content\u003c/div\u003e\n\t\t\t) : null}\n\t\t\u003c/div\u003e\n\t);\n};\n\nconst breakpoints = [\n\t{ prop: 'isSizeXs', selector: '#marker-xs' },\n\t{ prop: 'isSizeSm', selector: '#marker-sm' },\n\t{ prop: 'isSizeMd', selector: '#marker-md' },\n\t{ prop: 'isSizeLg', selector: '#marker-lg' },\n];\nconst MyResponsiveComponent = withBreakpointsCustom({ breakpoints }, MyComponent);\n```\n\nLastly, use your new higher-order component in place of your custom component.\n\n```js\nlet x = 1;\n\nfunction incrementCounter() {\n\tx++;\n}\n\nreturn (\n\t\u003cMyResponsiveComponent counter={x} onIncrement={incrementCounter}\u003e\n);\n```\n\n## License\n\n[MIT](/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwimpyprogrammer%2Freact-responsive-breakpoints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwimpyprogrammer%2Freact-responsive-breakpoints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwimpyprogrammer%2Freact-responsive-breakpoints/lists"}