{"id":16513798,"url":"https://github.com/wintercounter/use-breakpoint","last_synced_at":"2025-03-21T08:31:33.952Z","repository":{"id":52684806,"uuid":"201080082","full_name":"wintercounter/use-breakpoint","owner":"wintercounter","description":"React `useBreakpoint` hook to have different values for a variable based on a breakpoints.","archived":false,"fork":false,"pushed_at":"2021-04-21T07:19:43.000Z","size":22685,"stargazers_count":17,"open_issues_count":2,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-10T22:40:36.981Z","etag":null,"topics":["breakpoint","react","react-hooks","responsive","use-breakpoint"],"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/wintercounter.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","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":"2019-08-07T15:44:24.000Z","updated_at":"2023-04-05T12:20:05.000Z","dependencies_parsed_at":"2022-09-04T11:00:42.635Z","dependency_job_id":null,"html_url":"https://github.com/wintercounter/use-breakpoint","commit_stats":null,"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wintercounter%2Fuse-breakpoint","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wintercounter%2Fuse-breakpoint/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wintercounter%2Fuse-breakpoint/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wintercounter%2Fuse-breakpoint/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wintercounter","download_url":"https://codeload.github.com/wintercounter/use-breakpoint/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244124191,"owners_count":20401685,"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":["breakpoint","react","react-hooks","responsive","use-breakpoint"],"created_at":"2024-10-11T16:10:20.422Z","updated_at":"2025-03-21T08:31:31.029Z","avatar_url":"https://github.com/wintercounter.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Intro\n\nReact `useBreakpoint` hook to have different values for a variable\nbased on a breakpoints.\n\n# Demo\nhttps://wintercounter.github.io/use-breakpoint\n\n# Install\n\n```bash\nnpm i @w11r/use-breakpoint\n```\n\n# Setup\n\n## Add provider\n\nAdd `BreakpointProvider` in your React tree.\n\n```jsx\nimport { BreakpointProvider } from '@w11r/use-breakpoint'\n\n...\n    \u003cBreakpointProvider\u003e\n        ...\n    \u003c/BreakpointProvider\u003e\n...\n```\n\n## Default breakpoints\n\nThe following default breakpoints are being used, including several shorthands.\n\n```js\nconst breakpoints = {\n    micro: [0, 375],\n    mi: [0, 375],\n    mobile: [376, 639],\n    m: [376, 639],\n    tablet: [640, 1023],\n    t: [640, 1023],\n    small: [1024, 1439],\n    s: [1024, 1439],\n    medium: [1440, 1919],\n    med: [1440, 1919],\n    large: [1920, 10000],\n    l: [1920, 10000],\n    // Multi range\n    device: [0, 1023],\n    d: [0, 1023],\n    smallDevice: [0, 639],\n    sd: [0, 639]\n}\n```\n\n## Override default settings\n\n```js\nimport { setup, breakpoints } from '@w11r/use-breakpoint'\n\nsetup({\n    breakpoints: {\n        // Extend default values\n        ...breakpoints,\n        alienDevice: [342, 43534] // from, to\n    }\n})\n```\n\n# Usage\n\n## With passing values\n\n```js\nuseBreakpoint(defaultValue, breakpointValues)\n\n// breakpointValues: array of breakpoint based values\n[\n  ['mobile', 300],\n  ['tablet', 400]\n]\n\n// In case you have a single breakpoint value, `['mobile', 300]` is enough instead of `[['mobile', 300]]`\n```\n\n## Without passing values\n\nIn case you don't specify any value to the hook, it'll return a generated\nobject including boolean values for each breakpoint keys that's being\ndefined in options.\n\nIt'll return the following object with the basic setup.\n\n```\n{\n      isLandscape: false,\n      isPortrait: true,\n      isHDPI: false,\n      isMicro: false,\n      isMobile: true,\n      isTablet: false,\n      isSmall: false,\n      isMedium: false,\n      isLarge: false,\n      'is-Micro': false,\n      'is|Micro': false,\n      'isMicro+': true,\n      'is-Micro+': true,\n      'is|Micro+': true,\n      'isMicro-': false,\n      'is-Micro-': false,\n      'is|Micro-': false,\n      'is-Mobile': true,\n      'is|Mobile': true,\n      'isMobile+': true,\n      'is-Mobile+': true,\n      'is|Mobile+': true,\n      'isMobile-': true,\n      'is-Mobile-': true,\n      'is|Mobile-': true,\n      'is-Tablet': false,\n      'is|Tablet': false,\n      'isTablet+': false,\n      'is-Tablet+': false,\n      'is|Tablet+': false,\n      'isTablet-': true,\n      'is-Tablet-': true,\n      'is|Tablet-': true,\n      'is-Small': false,\n      'is|Small': false,\n      'isSmall+': false,\n      'is-Small+': false,\n      'is|Small+': false,\n      'isSmall-': true,\n      'is-Small-': true,\n      'is|Small-': true,\n      'is-Medium': false,\n      'is|Medium': false,\n      'isMedium+': false,\n      'is-Medium+': false,\n      'is|Medium+': false,\n      'isMedium-': true,\n      'is-Medium-': true,\n      'is|Medium-': true,\n      'is-Large': false,\n      'is|Large': false,\n      'isLarge+': false,\n      'is-Large+': false,\n      'is|Large+': false,\n      'isLarge-': true,\n      'is-Large-': true,\n      'is|Large-': true\n    }\n```\n\nUsage\n```js\nconst { isMobile } = useBreakpoint()\n\n// The above is basically a replacement for\nconst isMobile = useBreakpoint(false, ['mobile', true])\n```\n\n\u003e You can also access the values with suffix and prefix, but you need\n\u003e to rename the variables because it contains invalid character:\n\u003e `const { 'isMobile+': isMobile } = useBreakpoint()`\n\nComponent example\n\n```jsx\nimport useBreakpoint from '@w11r/use-breakpoint'\n\nconst MyCmp = () =\u003e {\n    const columns = useBreakpoint([1,2], ['mobile', [2,1]])\n\n    return \u003cGrid cols={columns} /\u003e\n}\n\n// Or using inline\nconst MyCmp = () =\u003e {\n    return \u003cGrid cols={useBreakpoint([1,2], ['mobile', [2,1]])} /\u003e\n}\n```\n\n\u003e _Rules-of-Hooks_ are still true in this case as well. Make sure\n\u003e your component will __ALWAYS__ run it without any condition!\n\n## Modifiers\n\nAll breakpoint names coming with modifiers included.\n\n### Orientation prefix\n\n- `` (none): all\n- `-`: Landscape\n- `|`: Portrait\n\n### Range suffix\n\nYou can also control your value to behave as `and up` and `and down`.\n\n- `` (none): all\n- `+`: `and up`\n- `-`: `and down`\n\n### Examples\n\n- `['|mobile', 300]`: on mobile, on portrait\n- `['|mobile+', 300]`: on mobile and up, on portrait\n- `['mobile+', 300]`: on mobile and up, both portrait and landscape\n- `['mobile', 300]`: on mobile, both portrait and landscape\n- `['tablet-', 300]`: on tablet and below, both portrait and landscape\n- `['mobile-', 300]`: on mobile and down, both portrait and landscape\n\n## Generate Media Query strings using the same logic\n\nIt is useful when you just need simple CSS. For example with `styled-components`:\n\n```js\nimport styled from 'styled-components'\nimport { mediaQuery } from '@w11r/use-breakpoint'\n\nconst mediaQueryString = mediaQuery(\n    ['mobile-', `width: 100%;`]\n)\n\nconst Box = styled.div`\n    ${mediaQuery(\n        ['mobile-', `width: 100%;`]\n    )}\n`\n\n// You can still use multiple queries at once just like with the hook:\nmediaQuery([['mobile-', `width: 100%`], ['medium+', `width: 50%`]])\n```\n\nThis utility comes with additional support for `shorthands` which is configurable through `options`.\n\n```js\nsetup({\n    shorthands: {\n        foo: '@media (wow: bar) and (hmm: khm)'\n    }\n})\n\nmediaQuery(['foo', value])\n```\n\nAdditionally, it supports `dark` and `light` mode prefixes:\n- `(`: Light mode\n- `)`: Dark mode\n\n```js\nmediaQuery([')mobile', 'content'])\n// @media screen and (min-width: 376px) and (max-width: 639px) and (prefers-color-scheme: dark) { content }\n\nmediaQuery([')', 'content'])\n// @media screen and (prefers-color-scheme: dark) { content }\n```\n\n# FAQ\n\n## Is there any best practice suggestion?\n\nYes! Use as fewer hooks as possible. It's always faster to have a single\n`isMobile` variable and have simple conditions based on it. It's even better\nif you can solve your size related cases using pure CSS Media Queries.\n\n## Why not using an `Object`? Why the `Array` structure?\n\nObject's cannot guarantee the order of the defined keys. It is crucial\nto check for values in the correct order because `useBreakpoint` uses\neager evaluation and `mediaQuery` must maintain the defined order of\nthe generated Media Queries.\n\n## Which rule is being prioritized?\n\nThe hook uses _eager_ evaluation, so the first truthy breakpoint value\ngets returned.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwintercounter%2Fuse-breakpoint","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwintercounter%2Fuse-breakpoint","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwintercounter%2Fuse-breakpoint/lists"}