{"id":13998598,"url":"https://github.com/kristofdombi/react-with-breakpoints","last_synced_at":"2026-02-10T01:16:09.037Z","repository":{"id":40295330,"uuid":"97169748","full_name":"kristofdombi/react-with-breakpoints","owner":"kristofdombi","description":"🍬 🙈 a set of utility components for altering the user experience between breakpoints","archived":false,"fork":false,"pushed_at":"2023-01-03T20:24:56.000Z","size":4409,"stargazers_count":56,"open_issues_count":19,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-10-31T17:34:57.733Z","etag":null,"topics":["airbnb","breakpoints","es6-javascript","higher-order-component","react","utility-function"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","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/kristofdombi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"code-of-conduct.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-07-13T22:29:09.000Z","updated_at":"2023-04-15T20:01:50.000Z","dependencies_parsed_at":"2023-02-01T09:46:48.781Z","dependency_job_id":null,"html_url":"https://github.com/kristofdombi/react-with-breakpoints","commit_stats":null,"previous_names":["kristof0425/react-with-breakpoint"],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristofdombi%2Freact-with-breakpoints","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristofdombi%2Freact-with-breakpoints/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristofdombi%2Freact-with-breakpoints/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kristofdombi%2Freact-with-breakpoints/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kristofdombi","download_url":"https://codeload.github.com/kristofdombi/react-with-breakpoints/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227245186,"owners_count":17753239,"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":["airbnb","breakpoints","es6-javascript","higher-order-component","react","utility-function"],"created_at":"2024-08-09T19:01:49.717Z","updated_at":"2026-02-10T01:16:03.994Z","avatar_url":"https://github.com/kristofdombi.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"./assets/logo-with-text.png\" /\u003e\n\u003c/p\u003e\n\n# react-with-breakpoints\n\n[![Build Status](https://travis-ci.org/kristof0425/react-with-breakpoints.svg?branch=master)](https://travis-ci.org/kristof0425/react-with-breakpoints)\n[![Coverage Status](https://coveralls.io/repos/github/kristof0425/react-with-breakpoints/badge.svg?branch=master)](https://coveralls.io/github/kristof0425/react-with-breakpoints?branch=master)\n\n\u003e Build leaner webpages with `react-with-breakpoints` like Airbnb. 👌\n\n## 🔧 Install\n\n```bash\nnpm install react-with-breakpoints\n\n# or use yarn\n\nyarn add react-with-breakpoints\n```\n\n## 👈 Usage\n\n**NOTE:** If you'd like to access v3 docs, please check the `v3` branch!\u003cbr /\u003e \nBeware that, `react-with-breakpoints` v4 depends on React Hooks, which were released with `react@16.8.0`. v3 is still maintained. \n\n```jsx\n// in index.js\nimport { BreakpointsProvider } from 'react-with-breakpoints';\n\nconst myApp = () =\u003e (\n  \u003cBreakpointsProvider\u003e\n    \u003cApp /\u003e\n  \u003c/BreakpointsProvider\u003e\n);\n\n// in App.js\nimport { ShowAt, HideAt } from 'react-with-breakpoints';\n\nconst App = () =\u003e (\n  \u003cShowAt breakpoint=\"mediumAndBelow\"\u003e\n    \u003cdiv\u003eHello World!\u003c/div\u003e\n  \u003c/ShowAt\u003e\n  \u003cHideAt breakpoint=\"mediumAndBelow\"\u003e\n    \u003cdiv\u003eHola Mundo!\u003c/div\u003e\n  \u003c/HideAt\u003e\n);\n```\n\n## ⚡️ Component list\n- `\u003cBreakpointsProvider /\u003e`\n- `\u003cHideAt /\u003e`\n- `\u003cShowAt /\u003e`\n\n### `\u003cBreakpointsProvider /\u003e`\n\nBreakpointsProvider is taking advantage of the new React v16.3 Context API. It is a context provider and therefore it needs to be rendered on the top of your component tree. For more information about React v16.3's Context API please visit [this link](https://reactjs.org/docs/context.html).\n\nSee in an example how you can use it:\n\n```jsx\n// in index.js\nimport { BreakpointsProvider } from 'react-with-breakpoints';\n\nconst breakpoints = {\n  small: 468,\n  medium: 768,\n  large: 1024,\n  xlarge: Infinity,\n}\n\nconst myApp = () =\u003e (\n  \u003cBreakpointsProvider breakpoints={ breakpoints }\u003e // breakpoints prop is optional\n    \u003cApp /\u003e\n  \u003c/BreakpointsProvider\u003e\n);\n```\n\n**NOTE:**\nAs you can see in the example above, the `breakpoints` prop has been moved from HideAt and ShowAt to the BreakpointsProvider component. There is a disadvantage and an advantage of this. You can finally modify the breakpoints object at one place in your app, it became centralised. The disadvantage is that now you need to refactor your code if you manually set the breakpoints in your project if you used v2.\n\n| Prop name | Type | Value | Default value | Description | Required |\n| --------- | ---- | ----- | ------------- | ----------- | -------- |\n| `breakpoints` | `Object` | `{ small: number, medium: number, large: number, xlarge: number }` | See it at [util/airbnbBreakpoints](util/airbnb-breakpoints.js): `{ small: 744, medium: 1128, large: 1440, xlarge: Infinity }` | Here you can override the default Airbnb breakpoints. It needs to be an object with a strict shape, which is shown at the value row. | `false` |\n| `onBreakpointChange` | `Function` | `(breakpoint: Breakpoint) =\u003e void` | `-` | Callback invoked on breakpoint change. | `false` |\n\n### `\u003cHideAt /\u003e`\n\nHideAt is a stateless function, which helps you make your DOM leaner. It hides its children, when the proper criterias are met.\n\nLet’s see it in action:\n\n```jsx\nimport { HideAt } from 'react-with-breakpoints';\n\nconst myApp = () =\u003e (\n  \u003cHideAt breakpoint=\"small\"\u003e\n    \u003cdiv\u003eHello World!\u003c/div\u003e\n  \u003c/HideAt\u003e\n);\n```\n\nHere, the div with the ‘Hello World!’ text is going to appear only if you are viewing your website on a medium or larger sized screen. It’ll be hidden and removed from the DOM on small screen width. HideAt gets the current breakpoint (screen width described as a text eg.: small) from BreakpointsProvider.\n\n**NOTE:**\nAs HideAt and ShowAt function the same way (they do the opposite things of each other), they share the same props and prop-types.\n\n| Prop name | Type | Value | Default value | Description | Required |\n| --------- | ---- | ----- | ------------- | ----------- | -------- |\n| `breakpoint` | `String` | Either one of these: `'small'`, `'medium'`, `'mediumAndBelow'`, `'mediumAndAbove'`, `'large'`, `'xlarge'` | - | You can set either one of the values to tell the component where to hide or show its children. | `true` |\n| `currentBreakpoint` | `String` | Either one of these: `'small'`, `'medium'`, `'large'`, `'xlarge'` | - | It's used by withBreakpoints. Whenever there is a change with the breakpoints, the appropriate value will be passed down to HideAt or ShowAt. | `false` |\n\n### `\u003cShowAt /\u003e`\n\nShowAt functions the opposite way as HideAt does. It reveals its children when the current breakpoint matches its breakpoint. (eg.: small, smallAndBelow)\n\nAs said above, ShowAt and HideAt share the same `props` and `propTypes`, so please look at the prop descriptions at HideAt.\n\n```jsx\nimport { ShowAt } from 'react-with-breakpoints';\n\nconst myApp = () =\u003e (\n  \u003cShowAt breakpoint=\"mediumAndBelow\"\u003e\n    \u003cdiv\u003eHello World!\u003c/div\u003e\n  \u003c/ShowAt\u003e\n);\n```\n\n## 💪 Contributions\n\nAlthough all kinds of contributions are welcome, I wouldn't mind having a system for them.\n**Please follow the instructions below, if you’re about to work on this project!**\n\n1. If you find something, that bothers you about these modules, or you could improve them, please submit a new issue [here](https://github.com/kristof0425/react-with-breakpoints/issues).\n2. Fork react-with-breakpoints repository and create your changes in your repository.\n3. Create a pull request with the appropriate issue’s number you created (or you found solvable) and put **Review needed** label on it, if you feel like done with your work.\n\nAfter this I'll review it personally and hopefully merge it as well.\n\nHappy coding! ☕️\n\n## 👏 Story\n\nI wrote a 4 min long story on Medium about what I learned along the way, when I created the first version of these three modules. It got published in [DailyJS](https://medium.com/dailyjs/i-open-sourced-3-modules-from-airbnb-614bc5a2a51d). 🤗\n\n## ©️ Licence\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristofdombi%2Freact-with-breakpoints","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkristofdombi%2Freact-with-breakpoints","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkristofdombi%2Freact-with-breakpoints/lists"}