├── .github └── workflows │ └── main.yml ├── .gitignore ├── .prettierrc ├── .vscode └── settings.json ├── .yarn └── releases │ └── yarn-4.5.3.cjs ├── .yarnrc.yml ├── CHANGELOG.md ├── FAQ.md ├── README.md ├── eslint.config.mjs ├── images ├── logo.afdesign └── logo.png ├── package.json ├── packages ├── react-responsive │ ├── .npmignore │ ├── .prettierrc │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── src │ │ ├── BreakpointsContext.tsx │ │ ├── Only.tsx │ │ ├── fromBreakpointToMedia.ts │ │ ├── index.ts │ │ ├── mediaQueryBuilder.ts │ │ ├── sanitize.ts │ │ ├── useBreakpoint.ts │ │ └── useMediaQuery.ts │ └── tsconfig.json └── tests │ ├── jest-puppeteer.config.js │ ├── jest.config.js │ ├── package.json │ ├── public │ └── index.html │ ├── src │ ├── App.tsx │ ├── Custom.tsx │ ├── Height.tsx │ ├── Hook.tsx │ ├── List.tsx │ ├── __tests__ │ │ ├── __snapshots__ │ │ │ ├── browser.ts.snap │ │ │ └── ssr.ts.snap │ │ ├── browser.ts │ │ ├── esm.mjs │ │ ├── resolver.ts │ │ ├── sizes.util.ts │ │ └── ssr.ts │ ├── index.html │ └── index.ts │ └── tsconfig.json └── yarn.lock /.github/workflows/main.yml: -------------------------------------------------------------------------------- 1 | name: Node CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | runs-on: ubuntu-latest 8 | 9 | strategy: 10 | matrix: 11 | node-version: [20.x, 22.x] 12 | 13 | steps: 14 | - uses: actions/checkout@v3 15 | - name: Use Node.js ${{ matrix.node-version }} 16 | uses: actions/setup-node@v3 17 | with: 18 | node-version: ${{ matrix.node-version }} 19 | - name: Install packages 20 | run: | 21 | yarn install 22 | - name: Build package 23 | run: | 24 | yarn build 25 | working-directory: ./packages/react-responsive 26 | - name: Run tests 27 | run: | 28 | yarn test --runInBand 29 | working-directory: ./packages/tests 30 | - name: Check linting + types 31 | run: | 32 | yarn lint 33 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Yarn 2 | node_modules/ 3 | .yarn/* 4 | !.yarn/releases 5 | !.yarn/plugins 6 | !.yarn/sdks 7 | !.yarn/versions 8 | .pnp.* 9 | 10 | # Misc 11 | *.log 12 | .DS_Store 13 | 14 | # Build 15 | lib/ 16 | dist/ 17 | tmp/ 18 | babel/ 19 | pkg/ 20 | 21 | .parcel-cache/ 22 | .cache/ 23 | cache/ 24 | *_cache_*/ 25 | .eslintcache 26 | -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": false, 3 | "trailingComma": "all", 4 | "printWidth": 60, 5 | "tabWidth": 2, 6 | "overrides": [ 7 | { 8 | "files": "*.md", 9 | "options": { 10 | "singleQuote": false, 11 | "trailingComma": "all", 12 | "printWidth": 120, 13 | "tabWidth": 2 14 | } 15 | } 16 | ] 17 | } 18 | -------------------------------------------------------------------------------- /.vscode/settings.json: -------------------------------------------------------------------------------- 1 | { 2 | "markdown.extension.toc.orderedList": true 3 | } 4 | -------------------------------------------------------------------------------- /.yarnrc.yml: -------------------------------------------------------------------------------- 1 | compressionLevel: mixed 2 | 3 | enableGlobalCache: false 4 | 5 | nodeLinker: node-modules 6 | 7 | yarnPath: .yarn/releases/yarn-4.5.3.cjs 8 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | # Changelog 2 | 3 | ## v4 4 | 5 | ### 4.0 6 | 7 | - Drop support for `Match` as this is an anti pattern (crawling children + leaking into the web TS globals) **[BREAKING CHANGE]** 8 | - Drop support for `toJSON` & `toCSS` **[BREAKING CHANGE]** 9 | - Drop support for node 16 & 18, and add for 20 & 22 10 | - Update support TS version to 5.7.2 (shouldn’t impact people depending on `@blocz/react-responsive`) 11 | - Mark React 19 as available 12 | 13 |
14 | See patches 15 | 16 | ### 4.0.0 17 | 18 | - Drop support for `Match` as this is an anti pattern (crawling children + leaking into the web TS globals) **[BREAKING CHANGE]** 19 | - Drop support for `toJSON` & `toCSS` **[BREAKING CHANGE]** 20 | - Drop support for node 16 & 18, and add for 20 & 22 21 | - Update support TS version to 5.7.2 (shouldn’t impact people depending on `@blocz/react-responsive`) 22 | - Mark React 19 as available 23 | 24 |
25 | Pre-releases 26 | 27 | ### 4.0.0-beta.1 28 | 29 | - Drop support for `toJSON` & `toCSS` **[BREAKING CHANGE]** 30 | 31 | ### 4.0.0-beta.0 32 | 33 | - Drop support for `Match` as this is an anti pattern (leaking into the web TS globals) **[BREAKING CHANGE]** 34 | - Drop support for node 16 & 18, and add for 20 & 22 35 | - Update support TS version to 5.7.2 (shouldn’t impact people depending on `@blocz/react-responsive`) 36 | - Mark React 19 as available 37 | 38 |
39 | 40 |
41 | 42 | ## v3 43 | 44 | ### 3.0 45 | 46 | - The package was renamed `@blocz/react-responsive` instead of `react-only` 47 | - rename `useOnly` to `useBreakpoint` and `useQuery` to `useMediaQuery` **[BREAKING CHANGE]** 48 | - `useBreakpoint` and `useMediaQuery` stop returning `undefined` during the initialization and if the media query is invalid **[BREAKING CHANGE]** 49 | - Avoid sending a warning on react 17 50 | - Fix `only` and `matchMedia` props on DOM elements for the `Match` component 51 | - Remove prop `strict` **[BREAKING CHANGE]** 52 | - Fix `exports` field in package.json 53 | - Drop support for node 13 and add support for node 15 and 16 54 | - Mark React 18 as available + fix types for React 18. 55 | 56 |
57 | See patches 58 | 59 | ### 3.0.3 60 | 61 | - Add `types` field in `exports` in package.json 62 | - Mark React 18 as available + fix types for React 18. 63 | 64 | ### 3.0.2 65 | 66 | - Better fix `only` and `matchMedia` props on DOM elements for the `Match` component 67 | - with the implementation of the v3.0.0, we were polluting the global scope, injecting the variable `React` everywhere. This version ships a better fix for both of them. 68 | - Add support for node 15 and 16 69 | 70 | ### 3.0.1 71 | 72 | - Fix `exports` field in package.json 73 | - use correct `lib/` folder instead of `dist/` 74 | - Use proper `.mjs` for node 75 | - Drop support for node 13 76 | 77 | #### 3.0.0 78 | 79 | - The package was renamed `@blocz/react-responsive` instead of `react-only` 80 | - rename `useOnly` to `useBreakpoint` and `useQuery` to `useMediaQuery` **[BREAKING CHANGE]** 81 | - Those were renamed for 2 reasons: 82 | 1. `useOnly` isn’t really explicit 83 | 2. `useQuery` can be confused with react-query’s or apollo’s useQuery hooks 84 | - `useBreakpoint` and `useMediaQuery` stop returning `undefined` during the initialization and if the media query is invalid. Instead it will directly use the correct value, and if the media query is invalid, it’ll return `false`. **[BREAKING CHANGE]** 85 | - Bump peerDependencies to allow for react 17 86 | - Drop support for node 10 87 | - Remove prop `strict`: **[BREAKING CHANGE]** 88 | - This feature was initially introduced to avoid collision between `mdUp` and `smDown` for instance. But since we avoid the overlapping of breakpoints in the v1.0.1 and as this is customizable, this prop doesn't make sense anymore. 89 | - This prop relied on `calc(% + 1px)` and `calc(% - 1px)` which has 2 issues: 90 | - difficult to be compatible with SSR as for instance css-mediaquery crashes when we use `calc()` (see [issue](https://github.com/ericf/css-mediaquery/issues/19)), 91 | - `1px` is really arbitrary and not customizable so anyway if someone wanted to change that, they had to use custom breakpoints. 92 | - Fix `only` and `matchMedia` props on DOM elements for the `Match` component 93 | - Inject `MatchChildProps` in `HTMLAttributes` from the global namespace `React` 94 | 95 | #### 3.0.0.beta.2 96 | 97 | - The package was renamed `@blocz/react-responsive` instead of `react-only` 98 | - Fix `only` and `matchMedia` props on DOM elements for the `Match` component 99 | 100 | #### 3.0.0.beta.1 101 | 102 | - Remove prop `strict` 103 | 104 | #### 3.0.0.beta.0 105 | 106 | - rename `useOnly` to `useBreakpoint` and `useQuery` to `useMediaQuery` **[BREAKING CHANGE]** 107 | - Those were renamed for 2 reasons: 108 | 1. `useOnly` isn’t really explicit 109 | 2. `useQuery` can be confused with react-query’s or apollo’s useQuery hooks 110 | - `useBreakpoint` and `useMediaQuery` stop returning `undefined` during the initialization and if the media query is invalid. Instead it will directly use the correct value, and if the media query is invalid, it’ll return `false`. **[BREAKING CHANGE]** 111 | - Bump peerDependencies to allow for react 17 112 | - Drop support for node 10 113 | 114 |
115 | 116 | ## v2 117 | 118 | ### 2.3 119 | 120 | - remove polyfill for matchMedia **minor breaking change** 121 | - add `useQuery` 122 | - drop `media` in `useOnly` **[BREAKING CHANGE]** 123 | - use Node 13 `exports` field 124 | - add `toJSON` and `toCSS` for CSS-in-JS support 125 | 126 |
127 | See patches 128 | 129 | #### 2.3.3 130 | 131 | - remove wrong dependency on `emotion` 132 | 133 | #### 2.3.2 134 | 135 | - add `toJSON` and `toCSS` for CSS-in-JS support 136 | 137 | #### 2.3.1 138 | 139 | - Use Node 13 conditional exports: https://nodejs.org/api/esm.html#esm_conditional_exports 140 | 141 | #### 2.3.0 142 | 143 | - remove polyfill for matchMedia (it should be define by the users) **minor breaking change** 144 | - add new hook `useQuery` and use it internally in `Only` for the prop `matchMedia` 145 | - drop `query` in `useOnly` **[BREAKING CHANGE]** 146 | - as there is a new hook `useQuery` that deals with media queries, the 2nd argument of `useOnly` was redundant 147 | - new signature: 148 | - before: `useOnly = (on?: string, media?: string, strict?: boolean) => boolean | undefined` 149 | - after: `useOnly = (on?: string, strict?: boolean) => boolean | undefined` 150 | - as `on` and `media` were join with a `or`, you can still mimic the previous behavior by doing: 151 | - before: 152 | ```js 153 | const isVisible = useOnly(on, media, strict); 154 | ``` 155 | - after: 156 | ```js 157 | const a = useOnly(on, strict); 158 | const b = useQuery(media); 159 | const isVisible = a || b; 160 | ``` 161 | 162 |
163 | 164 | ### 2.2 165 | 166 | - change 3rd option in breakpoint to be an `option` instead of just the unit 167 | 168 |
169 | See patches 170 | 171 | #### 2.2.0 172 | 173 | - the 3rd option of every breakpoint is instead of a unit string, a string representing the unit or an object with two keys: 174 | - `unit` as before (`"px", "em", ...`) 175 | - `direction` `"width"` or `"height"` 176 | 177 |
178 | 179 | ### 2.1 180 | 181 | - `useOnly` returns `undefined` before being initialized 182 | - fix bugs 183 | - expose `MatchChildProps` 184 | 185 |
186 | See patches 187 | 188 | #### 2.1.4 189 | 190 | - expose `MatchChildProps` 191 | 192 | #### 2.1.3 193 | 194 | - re-use `useLayoutEffect` to reduce delay between initialization and true values 195 | 196 | #### 2.1.2 197 | 198 | - fix non-valid breakpoints 199 | 200 | #### 2.1.1 201 | 202 | - avoid crashing when `window` is not defined 203 | 204 | #### 2.1.0 205 | 206 | - `useOnly` returns `undefined` before being initialized (no changes in `Only` and `Match`) **minor breaking change** 207 | 208 |
209 | 210 | ### 2.0 211 | 212 | - Use React's context 213 | - Drop Preact support **[BREAKING CHANGE]** 214 | - Remove `toCSS`, `toJSON` and `toMediaQuery` **[BREAKING CHANGE]** 215 | 216 |
217 | See patches 218 | 219 | #### 2.0.1 220 | 221 | - revert back to `addListener` instead of `addEventListener` on `matchMedia` for better browser supports 222 | 223 | #### 2.0.0 224 | 225 | - Remove Preact support (won't be an issue with Preact 10) **[BREAKING CHANGE]** 226 | - Use and expose `BreakpointsContext` instead of a class to store breakpoints 227 | - Remove `toCSS`, `toJSON` and `toMediaQuery` **[BREAKING CHANGE]** 228 | - Stop debouncing `isShown` because as it's a boolean, React isn't re-rendering if the same value is re-set 229 | - `Only` accepts other props when the prop `as` is used **type fix** 230 | 231 |
232 | Pre-releases 233 | 234 | #### 2.0.0-beta-2 235 | 236 | - Use `useEffect` in `useOnly` 237 | - Stop debouncing `isShown` because as it's a boolean, React isn't re-rendering if the same value is re-set 238 | 239 | #### 2.0.0-beta-1 240 | 241 | - Use `useLayoutEffect` in `useOnly` to reduce the delay before changing the DOM 242 | - Remove `toCSS`, `toJSON` and `toMediaQuery` **[BREAKING CHANGE]** 243 | 244 | #### 2.0.0-beta 245 | 246 | - Remove Preact support (won't be an issue with Preact X) **[BREAKING CHANGE]** 247 | - Use and expose `BreakpointsContext` instead of a class to store breakpoints 248 | - Change API of `toCSS`, `toJSON` and `toMediaQuery` (need to provide the breakpoints) **[BREAKING CHANGE]** 249 | 250 |
251 | 252 |
253 | 254 | ## v1 255 | 256 | ### 1.0 257 | 258 | - Upgrade to TypeScript 259 | - Add `useOnly` hook 260 | 261 |
262 | See patches 263 | 264 | #### 1.0.3 265 | 266 | - Create and expose a union type `Units` instead of an enum for the available css units 267 | 268 | #### 1.0.2 269 | 270 | - Change npmignore and change README 271 | 272 | #### 1.0.1 273 | 274 | - Avoid overlapping breakpoints in defaults **[BREAKING CHANGE]** 275 | 276 | #### 1.0.0 277 | 278 | - Add `useOnly` hook 279 | - Change internals to use `useOnly` 280 | - Upgrade to TypeScript 281 | 282 |
283 | 284 | ## v0 285 | 286 | ### 0.8 287 | 288 | - Add strict mode 289 | 290 |
291 | See patches 292 | 293 | #### 0.8.3 294 | 295 | - Support for matchMedia on node 296 | - Change tests for strict mode 297 | 298 | #### 0.8.0 299 | 300 | - Add strict mode 301 | 302 |
303 | 304 | ### 0.7 305 | 306 | - Add support for Parcel 307 | 308 |
309 | See patches 310 | 311 | #### 0.7.3 312 | 313 | - Add prop `as` in `` 314 | 315 | #### 0.7.2 316 | 317 | - Add support for Fragments (when the prop `as` isn't set on ``) for Preact 318 | 319 | #### 0.7.1 320 | 321 | - Change build system 322 | - Add support for `` for Parcel 323 | 324 | #### 0.7.0 325 | 326 | - Add support for Parcel 327 | 328 |
329 | 330 | ### 0.6 331 | 332 | - Add `` component 333 | 334 |
335 | See patches 336 | 337 | #### 0.6.7 338 | 339 | - Fix bug when `null` was a child of `` 340 | 341 | #### 0.6.6 342 | 343 | - Fix in README `toCSS`, `toJSON` 344 | - Add badges in README 345 | 346 | #### 0.6.5 347 | 348 | - Add `` component 349 | 350 |
351 | 352 | #### Older 353 | 354 | - Add `` component 355 | - Add `` component 356 | - Add `toCSS` 357 | - Add `toJSON` 358 | - Add `toMediaQuery` 359 | -------------------------------------------------------------------------------- /FAQ.md: -------------------------------------------------------------------------------- 1 | ## Why isn’t there an option to retrieve the current breakpoint? 2 | 3 | This is a bit hard to do and also it doesn’t really match this lib’s philosophy because breakpoints overlap each other.\ 4 | Let’s say that the breakpoint related to the current viewport is `md`, `smUp`, `xsUp`, `mdUp`, `md`, `mdDown`, `lgDown` and `xlDown` will all match this viewport. 5 | 6 | We could say “Okay but if we don’t consider the `Up`s and `Down`s, we could have a 1-1 binding”. But this couldn’t work either with custom breakpoints. Anyone could have a `phone` breakpoint that goes from 200px to 700px, a `tablet` breakpoint that goes from 500px to 1100px etc. And in this case, a viewport of 600px doesn’t match a unique breakpoint. 7 | 8 | That’s why the hook `useBreakpoint` was created. 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | packages/react-responsive/README.md -------------------------------------------------------------------------------- /eslint.config.mjs: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | import tseslint from "typescript-eslint"; 4 | import react from "@eslint-react/eslint-plugin"; 5 | import * as tsParser from "@typescript-eslint/parser"; 6 | import eslintPluginPrettierRecommended from "eslint-plugin-prettier/recommended"; 7 | 8 | export default [ 9 | ...tseslint.configs.recommended, 10 | { 11 | files: ["**/*.tsx"], 12 | ...react.configs.recommended, 13 | languageOptions: { 14 | parser: tsParser, 15 | }, 16 | }, 17 | eslintPluginPrettierRecommended, 18 | { 19 | ignores: [ 20 | // Yarn 21 | "**/node_modules/**", 22 | ".yarn/**", 23 | 24 | // Misc 25 | ".vscode/**", 26 | "**/*.log", 27 | "**/*.DS_Store", 28 | 29 | // Build 30 | "**/lib/**", 31 | "**/dist/**", 32 | "**/tmp/**", 33 | "**/babel/**", 34 | "**/pkg/**", 35 | 36 | ".parcel-cache/**", 37 | ".cache/**", 38 | "cache/**", 39 | "*_cache_*/", 40 | ], 41 | }, 42 | ]; 43 | -------------------------------------------------------------------------------- /images/logo.afdesign: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloczjs/react-responsive/7829028640f86882c220b7a59b0612909f606790/images/logo.afdesign -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bloczjs/react-responsive/7829028640f86882c220b7a59b0612909f606790/images/logo.png -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-responsive-main", 3 | "private": true, 4 | "version": "0.0.0", 5 | "author": "Ayc0", 6 | "license": "MIT", 7 | "workspaces": [ 8 | "packages/*" 9 | ], 10 | "scripts": { 11 | "lint": "eslint packages/" 12 | }, 13 | "devDependencies": { 14 | "@eslint-react/eslint-plugin": "^1.18.0", 15 | "@typescript-eslint/parser": "^8.18.0", 16 | "eslint": "^9.16.0", 17 | "eslint-config-prettier": "^9.1.0", 18 | "eslint-plugin-prettier": "^5.2.1", 19 | "prettier": "^3.4.2", 20 | "typescript": "^5.7.2", 21 | "typescript-eslint": "^8.18.0" 22 | }, 23 | "packageManager": "yarn@4.5.3" 24 | } 25 | -------------------------------------------------------------------------------- /packages/react-responsive/.npmignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | 3 | # Misc 4 | .vscode 5 | .github 6 | *.log 7 | .DS_Store 8 | .babelrc 9 | .eslintrc 10 | .eslintignore 11 | .prettierrc 12 | .gitignore 13 | CHANGELOG.md 14 | tsconfig.json 15 | 16 | # Build 17 | tmp/ 18 | babel/ 19 | 20 | # Cache 21 | .cache/ 22 | cache/ 23 | *_cache_*/ 24 | 25 | # Source 26 | src/ 27 | test/ 28 | tests/ 29 | preact/ 30 | -------------------------------------------------------------------------------- /packages/react-responsive/.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "singleQuote": false, 3 | "trailingComma": "all", 4 | "printWidth": 120, 5 | "tabWidth": 2 6 | } 7 | -------------------------------------------------------------------------------- /packages/react-responsive/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Ayc0 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/react-responsive/README.md: -------------------------------------------------------------------------------- 1 | # @blocz/react-responsive 2 | 3 | `@blocz/react-responsive` is inspired by the `.visible` classes from [bootstrap 4](https://getbootstrap.com/docs/4.0/migration/#responsive-utilities) (or `.hidden` classes from [bootstrap 3](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes)): only display a certain content for a precise screen size. 4 | 5 | It allows you to display component only for particular screen sizes. 6 | 7 | If you need a responsive layout and adaptive components, `@blocz/react-responsive` is here for you! 8 | 9 | [See changelog](https://github.com/bloczjs/react-responsive/blob/master/CHANGELOG.md) 10 | 11 | ## Table of contents 12 | 13 | 1. [How to use](#how-to-use) 14 | 1. [``](#only) 15 | 1. [Default breakpoints](#default-breakpoints) 16 | 2. [Additional `Up` and `Down`](#additional-up-and-down) 17 | 3. [Match Media Queries](#match-media-queries) 18 | 4. [Render as component](#render-as-component) 19 | 2. [Hooks](#hooks) 20 | 1. [`useBreakpoint()`](#usebreakpoint) 21 | 2. [`useMediaQuery()`](#usemediaquery) 22 | 3. [``](#breakpointsprovider) 23 | 1. [Add more breakpoints](#add-more-breakpoints) 24 | 2. [Change default breakpoints](#change-default-breakpoints) 25 | 3. [Units](#units) 26 | 4. [Direction](#direction) 27 | 4. [Comparison to other libraries](#comparison-to-other-libraries) 28 | 5. [`matchMedia` polyfill](#matchmedia-polyfill) 29 | 1. [Browser](#browser) 30 | 2. [Node](#node) 31 | 6. [FAQ](#faq) 32 | 33 | ## How to use 34 | 35 | ### `` 36 | 37 | #### Default breakpoints 38 | 39 | `@blocz/react-responsive` is based on the classic bootstrap breakpoints: `xs`, `sm`, `md`, `lg` and `xl`. 40 | 41 | ```javascript 42 | import React from "react"; 43 | import { Only } from "@blocz/react-responsive"; 44 | 45 | const App = () => ( 46 | 47 | Only visible for extra small devices (portrait phones) 48 | Only visible for small devices (landscape phones) 49 | Only visible for medium devices (tablets) 50 | Only visible for large devices (desktops) 51 | Only visible for extra large devices (large desktops) 52 | Only visible for small AND extra large devices 53 | 54 | ); 55 | ``` 56 | 57 | By default, the breakpoints are: 58 | 59 | | Breakpoint | From | To | 60 | | ---------- | -----: | -------: | 61 | | xs | 0px | 575px | 62 | | sm | 576px | 767px | 63 | | md | 768px | 991px | 64 | | lg | 992px | 1199px | 65 | | xl | 1200px | Infinity | 66 | 67 | #### Additional `Up` and `Down` 68 | 69 | In addition to the regular breakpoints, you have another api defined `{breakpoint}Up` and `{breakpoint}Down`: 70 | 71 | ```javascript 72 | import React from "react"; 73 | import { Only } from "@blocz/react-responsive"; 74 | 75 | const App = () => ( 76 | 77 | Visible on every device bigger or equal than "small" 78 | Visible on every device smaller or equal than "medium" 79 | 80 | ); 81 | ``` 82 | 83 | #### Match Media Queries 84 | 85 | For more advanced media queries, the prop `matchMedia` can be set to any regular query supported by [window.matchMedia](https://developer.mozilla.org/fr/docs/Web/API/Window/matchMedia). 86 | 87 | ```javascript 88 | import React from "react"; 89 | import { Only } from "@blocz/react-responsive"; 90 | 91 | const App = () => ( 92 | 93 | Visible on every device bigger than "500px" and in landscape mode 94 | 95 | ); 96 | ``` 97 | 98 | [More infos about CSS media queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) 99 | 100 | **Note:** If you use breakpoints AND matchMedia, the component will be displayed if one of the breakpoints is matched **OR** if the media query is fulfilled. 101 | 102 | #### Render as component 103 | 104 | If you want the `Only` components to render as another component, you can use the `as` props: 105 | 106 | ```javascript 107 | import React from "react"; 108 | import { Only } from "@blocz/react-responsive"; 109 | 110 | const App = () => ( 111 |
    112 | 113 | Only visible for extra small devices (portrait phones) 114 | 115 | 116 | Only visible for small devices (landscape phones) 117 | 118 | 119 | Only visible for medium devices (tablets) 120 | 121 | 122 | Only visible for large devices (desktops) 123 | 124 | 125 | Only visible for extra large devices (large desktops) 126 | 127 | 128 | Only visible for small AND extra large devices 129 | 130 |
131 | ); 132 | ``` 133 | 134 | The `as` props can take any DOM tag string (`div`, `ul`, `li`, ...) or any React component: 135 | 136 | ```javascript 137 | import React from "react"; 138 | import { Only } from "@blocz/react-responsive"; 139 | 140 | const Custom = ({ title, children }) => ( 141 | 142 |

{title}

143 |

{children}

144 | 145 | ); 146 | 147 | const App = () => ( 148 | 149 | 150 | Only visible for extra small devices (portrait phones) 151 | 152 | 153 | Only visible for small devices (landscape phones) 154 | 155 | 156 | Only visible for medium devices (tablets) 157 | 158 | 159 | Only visible for large devices (desktops) 160 | 161 | 162 | Only visible for extra large devices (large desktops) 163 | 164 | 165 | Only visible for small AND extra large devices 166 | 167 | 168 | ); 169 | ``` 170 | 171 | Note that any props except for `matchMedia`, `as` and `on` will be forwarded to the `as` props. 172 | 173 | ### Hooks 174 | 175 | #### `useBreakpoint()` 176 | 177 | `useBreakpoint` is a [hook](https://reactjs.org/docs/hooks-intro.html) that detects if the given breakpoint matches the current viewport. 178 | 179 | ```javascript 180 | import React from "react"; 181 | import { useBreakpoint } from "@blocz/react-responsive"; 182 | 183 | const App = () => { 184 | const matchXl = useBreakpoint("xl"); 185 | const matchMdDown = useBreakpoint("mdDown"); 186 | const matchMdOrLg = useBreakpoint("md lg"); 187 | return ( 188 |
    189 | {matchXl &&
  • Visible on every "large" device
    • } 190 | {matchMdDown &&
  • Visible on every device smaller or equal than "medium"
    • } 191 | {matchMdOrLg &&
  • Visible on every "medium" or "large" device
    • } 192 |
193 | ); 194 | }; 195 | ``` 196 | 197 | #### `useMediaQuery()` 198 | 199 | `useMediaQuery` is a [hook](https://reactjs.org/docs/hooks-intro.html) that detects if the given media query matches the current viewport. 200 | 201 | ```javascript 202 | import React from "react"; 203 | import { useMediaQuery } from "@blocz/react-responsive"; 204 | 205 | const App = () => { 206 | const matchMediaQuery = useMediaQuery("(min-width:768px) and (max-width:992px),(max-width:576px)"); 207 | return
    {matchMediaQuery &&
  • Visible at (min-width:768px) and (max-width:992px),(max-width:576px)
    • }
; 208 | }; 209 | ``` 210 | 211 | ### `` 212 | 213 | `BreakpointsProvider` defines the values of every breakpoints. 214 | 215 | Use it to inject or modify the breakpoints (only use one `BreakpointsProvider` per build). 216 | 217 | #### Add more breakpoints 218 | 219 | ```javascript 220 | import React from "react"; 221 | import { Only, BreakpointsProvider } from "@blocz/react-responsive"; 222 | 223 | const App = () => ( 224 | 225 | Visible on every device from "263px" to "863px" 226 | Visible on every device bigger than "263px" 227 | Visible on every device smaller than "863px" 228 | 229 | ); 230 | ``` 231 | 232 | #### Change default breakpoints 233 | 234 | ```javascript 235 | import React from "react"; 236 | import { Only, BreakpointsProvider } from "@blocz/react-responsive"; 237 | 238 | const App = () => ( 239 | 240 | Visible on every device from "263px" to "863px" 241 | Visible on every device bigger than "263px" 242 | Visible on every device smaller than "863px" 243 | 244 | ); 245 | ``` 246 | 247 | **Warning**: This **overrides completely** the default breakpoints, in this example, the other breakpoints `xs`, `md`, `lg` and `xl` **are no longer defined!** 248 | 249 | #### Units 250 | 251 | You can specify which unit is going to be used for the breakpoint by specifying in the 3rd option a "unit" key. 252 | 253 | By default, the unit is "px". 254 | 255 | ```javascript 256 | import React from "react"; 257 | import { Only, BreakpointsProvider } from "@blocz/react-responsive"; 258 | 259 | const App = () => ( 260 | 266 | Visible on every device from "263px" to "863px" 267 | Visible on every device from "20em" to "40em" 268 | 269 | ); 270 | ``` 271 | 272 | #### Direction 273 | 274 | You can specify which direction is used for the media queries (height or width). 275 | 276 | By default, "width" is the chosen direction. 277 | 278 | ```javascript 279 | import React from "react"; 280 | import { Only, BreakpointsProvider } from "@blocz/react-responsive"; 281 | 282 | const App = () => ( 283 | 289 | Visible on every device from "300px" to "500px" wide 290 | Visible on every device from "200px" to "400px" tall 291 | 292 | ); 293 | ``` 294 | 295 | Every CSS units are supported. 296 | 297 | The default unit is `px`. 298 | 299 | ### Comparison to other libraries 300 | 301 | | Lib | Breakpoints | Custom breakpoints | Media query | `matchMedia` listener' | hooks | SSR support | 302 | | ------------------------------------------------------------------------------------------ | ----------: | -----------------: | ----------: | ---------------------: | ----: | ----------: | 303 | | [@blocz/react-responsive](https://www.npmjs.com/package/@blocz/react-responsive) | ✅ | ✅ | ✅ | ✅ | ✅ | ✅ | 304 | | [react-responsive](https://www.npmjs.com/package/react-responsive) | ❌ | ❌ | ✅ | ✅ | ✅ | ✅ | 305 | | [react-breakpoints](https://www.npmjs.com/package/react-breakpoints) | ✅ | ✅ | ❌ | ❌ | ❌ | ✅ | 306 | | [react-responsive-breakpoints](https://www.npmjs.com/package/react-responsive-breakpoints) | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ | 307 | 308 | ': `matchMedia` listener event means that the library is built around `matchMedia.addListener(callback)` and not `window.addEventListener('resize', callback)` (which is faster because the callback is only triggered when the media query's state changes and not at every resize). 309 | 310 | ### `matchMedia` polyfill 311 | 312 | #### Browser 313 | 314 | If you are on want to use matchMedia on browser that don’t support it, I’d recommend you to use [`matchmedia-polyfill`](https://github.com/paulirish/matchMedia.js/). 315 | 316 | #### Node 317 | 318 | If you want to mock `matchMedia` on Node to execute tests for instance, you can use [`mock-match-media`](https://github.com/Ayc0/mock-match-media/). 319 | 320 | And if you need an example with `Jest`, `@testing-library/react`, `React` and `@blocz/react-responsive`, you can take a look at [these tests](https://github.com/bloczjs/react-responsive/blob/master/packages/tests/src/__tests__/ssr.ts). 321 | 322 | ### FAQ 323 | 324 | For other questions, please take a look at our [FAQ document](https://github.com/bloczjs/react-responsive/blob/master/FAQ.md). 325 | -------------------------------------------------------------------------------- /packages/react-responsive/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@blocz/react-responsive", 3 | "version": "4.0.0", 4 | "description": "🔍 displays some contents for a specific screen size", 5 | "source": "src/index.ts", 6 | "sideEffects": false, 7 | "main": "lib/react-responsive.js", 8 | "umd:main": "lib/react-responsive.umd.js", 9 | "module": "lib/react-responsive.modern.js", 10 | "types": "lib/index.d.ts", 11 | "exports": { 12 | ".": { 13 | "types": "./lib/index.d.ts", 14 | "require": "./lib/react-responsive.js", 15 | "import": "./lib/react-responsive.modern.mjs", 16 | "browser": "./lib/react-responsive.modern.js", 17 | "umd": "./lib/react-responsive.umd.js" 18 | }, 19 | "./package.json": "./package.json" 20 | }, 21 | "repository": { 22 | "url": "git+ssh://git@github.com/bloczjs/react-responsive.git" 23 | }, 24 | "keywords": [ 25 | "adaptive", 26 | "breakpoint", 27 | "css", 28 | "media-query", 29 | "react", 30 | "responsive", 31 | "react-responsive" 32 | ], 33 | "author": "Ayc0", 34 | "license": "MIT", 35 | "bugs": "https://github.com/bloczjs/react-responsive/issues", 36 | "scripts": { 37 | "build": "yarn build:microbundle && cp lib/react-responsive.modern.js lib/react-responsive.modern.mjs", 38 | "build:dev": "yarn build:microbundle --compress false", 39 | "build:microbundle": "microbundle --name $npm_package_name --globals react=React", 40 | "link:readme": "rm ../../README.md && ln -s packages/react-responsive/README.md ../..", 41 | "prepublishOnly": "rm -rf lib && yarn build" 42 | }, 43 | "homepage": "https://github.com/bloczjs/react-responsive#readme", 44 | "devDependencies": { 45 | "@types/react": "^19.0.1", 46 | "microbundle": "^0.15.1" 47 | }, 48 | "peerDependencies": { 49 | "react": "16.8.0 - 19.x.x" 50 | } 51 | } 52 | -------------------------------------------------------------------------------- /packages/react-responsive/src/BreakpointsContext.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { sanitize, ExposedBreakpoints, Breakpoints } from "./sanitize"; 4 | 5 | const defaultBreakpoints: ExposedBreakpoints = { 6 | xs: [0, 575, "px"], // Extra small devices (portrait phones) 7 | sm: [576, 767, "px"], // Small devices (landscape phones) 8 | md: [768, 991, "px"], // Medium devices (tablets) 9 | lg: [992, 1199, "px"], // Large devices (desktops) 10 | xl: [1200, Infinity, "px"], // Extra large devices (large desktops) 11 | }; 12 | 13 | export const BreakpointsContext: React.Context = React.createContext( 14 | sanitize(defaultBreakpoints), 15 | ); 16 | 17 | interface BreakpointsProviderProps { 18 | breakpoints?: ExposedBreakpoints; 19 | additionalBreakpoints?: ExposedBreakpoints; 20 | } 21 | 22 | export const BreakpointsProvider: React.FunctionComponent> = ({ 23 | breakpoints = defaultBreakpoints, 24 | additionalBreakpoints, 25 | children, 26 | }) => { 27 | return ( 28 | 34 | {children} 35 | 36 | ); 37 | }; 38 | 39 | BreakpointsProvider.displayName = "BreakpointsProvider"; 40 | -------------------------------------------------------------------------------- /packages/react-responsive/src/Only.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { useBreakpoint } from "./useBreakpoint"; 4 | import { useMediaQuery } from "./useMediaQuery"; 5 | 6 | export type OnlyProps> = OtherProps & { 7 | matchMedia?: string; 8 | on?: string; 9 | as?: string | React.ComponentType; 10 | }; 11 | 12 | export function Only>({ 13 | matchMedia, 14 | on, 15 | as, 16 | children, 17 | ...props 18 | }: React.PropsWithChildren>): React.ReactElement | null { 19 | const matchOn = useBreakpoint(on); 20 | const matchQuery = useMediaQuery(matchMedia || "-"); 21 | const isShown = matchOn || matchQuery; 22 | 23 | if (!isShown) { 24 | return null; 25 | } 26 | 27 | return React.createElement( 28 | // @ts-expect-error – this is a complex type 29 | as || React.Fragment, 30 | as ? (props as OtherProps) : undefined, 31 | children, 32 | ); 33 | } 34 | -------------------------------------------------------------------------------- /packages/react-responsive/src/fromBreakpointToMedia.ts: -------------------------------------------------------------------------------- 1 | import { Breakpoint } from "./sanitize"; 2 | 3 | export const fromBreakpointToMedia = (breakpoint: Breakpoint): string => { 4 | const mediaList: string[] = []; 5 | const [minValue, maxValue, unit, direction] = breakpoint; 6 | let str; 7 | 8 | // Min value 9 | if (minValue !== 0) { 10 | str = `${minValue}${unit}`; 11 | mediaList.push(`(min-${direction}:${str})`); 12 | } 13 | 14 | // Max value 15 | if (maxValue !== Infinity) { 16 | str = `${maxValue}${unit}`; 17 | mediaList.push(`(max-${direction}:${str})`); 18 | } 19 | 20 | return " " + mediaList.join(" and "); 21 | }; 22 | -------------------------------------------------------------------------------- /packages/react-responsive/src/index.ts: -------------------------------------------------------------------------------- 1 | export { BreakpointsProvider, BreakpointsContext } from "./BreakpointsContext"; 2 | export { Only } from "./Only"; 3 | export { useBreakpoint } from "./useBreakpoint"; 4 | export { useMediaQuery } from "./useMediaQuery"; 5 | export { type Units } from "./sanitize"; 6 | -------------------------------------------------------------------------------- /packages/react-responsive/src/mediaQueryBuilder.ts: -------------------------------------------------------------------------------- 1 | import { Breakpoints } from "./sanitize"; 2 | import { fromBreakpointToMedia } from "./fromBreakpointToMedia"; 3 | 4 | export const mediaQueryBuilder = 5 | (breakpoints: Breakpoints) => 6 | (on = ""): string => { 7 | if (!on) { 8 | return ""; 9 | } 10 | const rawBreakpointNames = on.split(" "); 11 | const filteredBreakpoints = rawBreakpointNames.map((breakpointName) => breakpoints[breakpointName]).filter(Boolean); 12 | const mediaQuery = filteredBreakpoints 13 | .map((breakpoint) => fromBreakpointToMedia(breakpoint)) 14 | .filter(Boolean) 15 | .join(","); 16 | if (!mediaQuery) { 17 | const isUniqBreakpoint = rawBreakpointNames.length === 1; 18 | console.error( 19 | `"${rawBreakpointNames.join('", "')}" ${isUniqBreakpoint ? "is" : "are"}n't ${ 20 | isUniqBreakpoint ? "a " : "" 21 | }valid breakpoint${isUniqBreakpoint ? "" : "s"}`, 22 | ); 23 | } 24 | return mediaQuery; 25 | }; 26 | -------------------------------------------------------------------------------- /packages/react-responsive/src/sanitize.ts: -------------------------------------------------------------------------------- 1 | export type Units = 2 | | "em" 3 | | "ex" 4 | | "%" 5 | | "px" 6 | | "cm" 7 | | "mm" 8 | | "in" 9 | | "pt" 10 | | "pc" 11 | | "ch" 12 | | "rem" 13 | | "vh" 14 | | "vw" 15 | | "vmin" 16 | | "vmax"; 17 | 18 | const listOfSupportedUnits: Units[] = [ 19 | "em", 20 | "ex", 21 | "%", 22 | "px", 23 | "cm", 24 | "mm", 25 | "in", 26 | "pt", 27 | "pc", 28 | "ch", 29 | "rem", 30 | "vh", 31 | "vw", 32 | "vmin", 33 | "vmax", 34 | ]; 35 | 36 | type Directions = "width" | "height"; 37 | 38 | const listOfSupportedDirections: Directions[] = ["width", "height"]; 39 | 40 | export type ExposedBreakpoint = 41 | | [number, number] 42 | | [number, number, Units] 43 | | [number, number, { unit?: Units; direction?: Directions }]; 44 | 45 | export interface ExposedBreakpoints { 46 | [key: string]: ExposedBreakpoint; 47 | } 48 | 49 | export type Breakpoint = [number, number, Units, Directions]; 50 | 51 | export interface Breakpoints { 52 | [breakpoint: string]: Breakpoint; 53 | } 54 | 55 | export const sanitize = (inBreakpoints: ExposedBreakpoints): Breakpoints => { 56 | return Object.keys(inBreakpoints).reduce((breakpoints, breakpointName) => { 57 | const breakpoint = inBreakpoints[breakpointName]; 58 | 59 | if (!Array.isArray(breakpoint) || breakpoint.length <= 1) { 60 | return breakpoints; 61 | } 62 | 63 | const [supposedMin, supposedMax, options, ...rest] = breakpoint; 64 | if (rest.length > 0) { 65 | const error = new Error(`The following fields "${rest}" have been ignored`); 66 | console.error(error); 67 | } 68 | 69 | if (typeof supposedMin !== "number" || typeof supposedMax !== "number") { 70 | return breakpoints; 71 | } 72 | 73 | let supposedUnit: Units | undefined; 74 | let supposedDirection: Directions | undefined; 75 | if (typeof options === "string") { 76 | supposedUnit = options; 77 | } else if (typeof options === "object") { 78 | supposedDirection = options.direction; 79 | supposedUnit = options.unit; 80 | } 81 | 82 | const min = Math.min(supposedMin, supposedMax); 83 | const max = Math.max(supposedMin, supposedMax); 84 | const unit = supposedUnit && listOfSupportedUnits.includes(supposedUnit) ? supposedUnit : "px"; 85 | const direction = 86 | supposedDirection && listOfSupportedDirections.includes(supposedDirection) ? supposedDirection : "width"; 87 | 88 | breakpoints[breakpointName] = [min, max, unit, direction]; 89 | breakpoints[`${breakpointName}Up`] = [min, Infinity, unit, direction]; 90 | breakpoints[`${breakpointName}Down`] = [0, max, unit, direction]; 91 | 92 | return breakpoints; 93 | }, {}); 94 | }; 95 | -------------------------------------------------------------------------------- /packages/react-responsive/src/useBreakpoint.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { BreakpointsContext } from "./BreakpointsContext"; 4 | 5 | import { mediaQueryBuilder } from "./mediaQueryBuilder"; 6 | 7 | import { useMediaQuery } from "./useMediaQuery"; 8 | 9 | export const useBreakpoint = (on?: string): boolean => { 10 | const breakpoints = React.useContext(BreakpointsContext); 11 | const toMediaQuery = React.useMemo(() => mediaQueryBuilder(breakpoints), [breakpoints]); 12 | 13 | const mediaQuery = React.useMemo(() => toMediaQuery(on), [toMediaQuery, on]); 14 | 15 | return useMediaQuery(mediaQuery || "-"); 16 | }; 17 | -------------------------------------------------------------------------------- /packages/react-responsive/src/useMediaQuery.ts: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | export const useMediaQuery = (mediaQuery: string): boolean => { 4 | const mediaQueryList = React.useMemo(() => matchMedia(mediaQuery), [mediaQuery]); 5 | const [isShown, setIsShown] = React.useState(mediaQueryList.matches); 6 | 7 | React.useLayoutEffect(() => { 8 | setIsShown(mediaQueryList.matches); 9 | const listener = (event: MediaQueryListEvent) => { 10 | // Those are important updates, so we don't want to use transitions on them 11 | setIsShown(event.matches); 12 | }; 13 | 14 | // cannot use addEventListener for IE 11 and safari 13- 15 | mediaQueryList.addListener(listener); 16 | return () => { 17 | mediaQueryList.removeListener(listener); 18 | }; 19 | }, [mediaQueryList]); 20 | 21 | return isShown; 22 | }; 23 | -------------------------------------------------------------------------------- /packages/react-responsive/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "module": "esnext", 4 | "target": "es2019", 5 | "allowJs": false, 6 | "declaration": true, 7 | "jsx": "react", 8 | "jsxFactory": "React.createElement", 9 | "isolatedDeclarations": true, 10 | "strict": true, 11 | "noImplicitAny": true, 12 | "strictNullChecks": true, 13 | "strictFunctionTypes": true, 14 | "noImplicitThis": true, 15 | "alwaysStrict": true, 16 | "noUnusedLocals": true, 17 | "noUnusedParameters": true, 18 | "noImplicitReturns": true, 19 | "noFallthroughCasesInSwitch": true, 20 | // "allowSyntheticDefaultImports": true, 21 | "moduleResolution": "node" 22 | }, 23 | "include": ["src/*"] 24 | } 25 | -------------------------------------------------------------------------------- /packages/tests/jest-puppeteer.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | server: { 3 | command: "BROWSER=none yarn start", 4 | launchTimeout: 10000, 5 | port: 3000, 6 | }, 7 | }; 8 | -------------------------------------------------------------------------------- /packages/tests/jest.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | roots: ["/src"], 3 | preset: "jest-puppeteer", 4 | transform: { 5 | "^.+\\.[jt]sx?$": "ts-jest", 6 | }, 7 | testPathIgnorePatterns: [".*\\.util\\..*"], 8 | moduleDirectories: [ 9 | "/node_modules", 10 | "/../../node_modules", 11 | ], 12 | }; 13 | -------------------------------------------------------------------------------- /packages/tests/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-responsive-test", 3 | "version": "0.0.0", 4 | "private": true, 5 | "scripts": { 6 | "start": "parcel src/index.html -p 3000", 7 | "test": "jest --silent" 8 | }, 9 | "dependencies": { 10 | "@blocz/react-responsive": "workspace:*", 11 | "@emotion/css": "^11.13.5", 12 | "react": "^19.0.0", 13 | "react-dom": "^19.0.0" 14 | }, 15 | "devDependencies": { 16 | "@testing-library/dom": "^10.4.0", 17 | "@testing-library/react": "^16.1.0", 18 | "@types/jest": "^29.5.14", 19 | "@types/jest-environment-puppeteer": "^5.0.6", 20 | "@types/node": "^22.10.1", 21 | "@types/react": "^19.0.1", 22 | "@types/react-dom": "^19.0.2", 23 | "jest": "^29.7.0", 24 | "jest-environment-jsdom": "^29.7.0", 25 | "jest-puppeteer": "^10.1.4", 26 | "mock-match-media": "^0.4.3", 27 | "parcel": "^2.13.2", 28 | "process": "^0.11.10", 29 | "puppeteer": "^23.10.2", 30 | "ts-jest": "^29.2.5", 31 | "typescript": "^5.7.2" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/tests/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | React App 11 | 12 | 13 | 14 |
15 | 16 | 17 | -------------------------------------------------------------------------------- /packages/tests/src/App.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { BreakpointsProvider } from "@blocz/react-responsive"; 3 | 4 | import List from "./List"; 5 | import Custom from "./Custom"; 6 | import Hook from "./Hook"; 7 | import Height from "./Height"; 8 | 9 | const App = ( 10 | 17 | 18 |
19 | 20 |
21 | 22 |
23 | 24 | 25 | ); 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /packages/tests/src/Custom.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Only } from "@blocz/react-responsive"; 3 | 4 | interface CustomProps { 5 | title: string; 6 | } 7 | 8 | const Custom: React.FunctionComponent< 9 | React.PropsWithChildren 10 | > = ({ title, children }) => ( 11 | <> 12 |

{title}

13 |

{children}

14 | 15 | ); 16 | 17 | export default function Sample() { 18 | return ( 19 | <> 20 |

Custom component

21 | 22 | Only visible for extra small devices (portrait 23 | phones) 24 | 25 | 26 | Only visible for small devices (landscape phones) 27 | 28 | 29 | Only visible for medium devices (tablets) 30 | 31 | 32 | Only visible for large devices (desktops) 33 | 34 | 35 | Only visible for extra large devices (large 36 | desktops) 37 | 38 | 39 | Only visible for small AND extra large devices 40 | 41 | 42 | ); 43 | } 44 | -------------------------------------------------------------------------------- /packages/tests/src/Height.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { useBreakpoint } from "@blocz/react-responsive"; 4 | 5 | const toString = (value: boolean | undefined) => { 6 | switch (value) { 7 | case true: 8 | return "true"; 9 | case false: 10 | return "false"; 11 | case undefined: 12 | return "undefined"; 13 | } 14 | }; 15 | 16 | const Height = () => { 17 | const isThin = useBreakpoint("thin"); 18 | const isNormal = useBreakpoint("normal"); 19 | const isBig = useBreakpoint("big"); 20 | const isThinUp = useBreakpoint("thinUp"); 21 | const isNormalUp = useBreakpoint("normalUp"); 22 | const isBigUp = useBreakpoint("bigUp"); 23 | const isThinDown = useBreakpoint("thinDown"); 24 | const isNormalDown = useBreakpoint("normalDown"); 25 | const isBigDown = useBreakpoint("bigDown"); 26 | 27 | return ( 28 | <> 29 |

useBreakpoint() with heights

30 |

31 | isThin: 32 | {toString(isThin)} 33 |

34 |

35 | isThinDown: 36 | {toString(isThinDown)} 37 |

38 |

39 | isThinUp: 40 | {toString(isThinUp)} 41 |

42 |

43 | isNormal: 44 | {toString(isNormal)} 45 |

46 |

47 | isNormalDown: 48 | {toString(isNormalDown)} 49 |

50 |

51 | isNormalUp: 52 | {toString(isNormalUp)} 53 |

54 |

55 | isBig: 56 | {toString(isBig)} 57 |

58 |

59 | isBigDown: 60 | {toString(isBigDown)} 61 |

62 |

63 | isBigUp: 64 | {toString(isBigUp)} 65 |

66 | 67 | ); 68 | }; 69 | 70 | export default Height; 71 | -------------------------------------------------------------------------------- /packages/tests/src/Hook.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | 3 | import { 4 | useBreakpoint, 5 | useMediaQuery, 6 | } from "@blocz/react-responsive"; 7 | 8 | const toString = (value: boolean | undefined) => { 9 | switch (value) { 10 | case true: 11 | return "true"; 12 | case false: 13 | return "false"; 14 | case undefined: 15 | return "undefined"; 16 | } 17 | }; 18 | 19 | const Hook = () => { 20 | const isXs = useBreakpoint("xs"); 21 | const isSm = useBreakpoint("sm"); 22 | const isMd = useBreakpoint("md"); 23 | const isLg = useBreakpoint("lg"); 24 | const isXl = useBreakpoint("xl"); 25 | const isXsUp = useBreakpoint("xsUp"); 26 | const isSmUp = useBreakpoint("smUp"); 27 | const isMdUp = useBreakpoint("mdUp"); 28 | const isLgUp = useBreakpoint("lgUp"); 29 | const isXlUp = useBreakpoint("xlUp"); 30 | const isXsDown = useBreakpoint("xsDown"); 31 | const isSmDown = useBreakpoint("smDown"); 32 | const isMdDown = useBreakpoint("mdDown"); 33 | const isLgDown = useBreakpoint("lgDown"); 34 | const isXlDown = useBreakpoint("xlDown"); 35 | const isMedia = useMediaQuery( 36 | "(min-width:768px) and (max-width:992px),(max-width:576px)", 37 | ); 38 | const isWrongBreakpoint = useBreakpoint("wrong"); 39 | const isWrongMedia = useMediaQuery("wrong"); 40 | 41 | return ( 42 | <> 43 |

useBreakpoint()

44 |

45 | isXs: 46 | {toString(isXs)} 47 |

48 |

49 | isXsDown: 50 | {toString(isXsDown)} 51 |

52 |

53 | isXsUp: 54 | {toString(isXsUp)} 55 |

56 |

57 | isSm: 58 | {toString(isSm)} 59 |

60 |

61 | isSmDown: 62 | {toString(isSmDown)} 63 |

64 |

65 | isSmUp: 66 | {toString(isSmUp)} 67 |

68 |

69 | isMd: 70 | {toString(isMd)} 71 |

72 |

73 | isMdDown: 74 | {toString(isMdDown)} 75 |

76 |

77 | isMdUp: 78 | {toString(isMdUp)} 79 |

80 |

81 | isLg: 82 | {toString(isLg)} 83 |

84 |

85 | isLgDown: 86 | {toString(isLgDown)} 87 |

88 |

89 | isLgUp: 90 | {toString(isLgUp)} 91 |

92 |

93 | isXl: 94 | {toString(isXl)} 95 |

96 |

97 | isXlDown: 98 | {toString(isXlDown)} 99 |

100 |

101 | isXlUp: 102 | {toString(isXlUp)} 103 |

104 |

105 | 106 | (min-width:768px) and 107 | (max-width:992px),(max-width:576px):{" "} 108 | 109 | {toString(isMedia)} 110 |

111 |

112 | wrong breakpoint: 113 | {toString(isWrongBreakpoint)} 114 |

115 |

116 | wrong media query: 117 | {toString(isWrongMedia)} 118 |

119 | 120 | ); 121 | }; 122 | 123 | export default Hook; 124 | -------------------------------------------------------------------------------- /packages/tests/src/List.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react"; 2 | import { Only } from "@blocz/react-responsive"; 3 | 4 | export default function Sample() { 5 | return ( 6 | <> 7 |

{""}

8 |
    9 | 10 | Only visible for extra small devices (portrait 11 | phones) 12 | 13 | 14 | Only visible for small devices (landscape phones) 15 | 16 | 17 | Only visible for medium devices (tablets) 18 | 19 | 20 | Only visible for large devices (desktops) 21 | 22 | 23 | Only visible for extra large devices (large 24 | desktops) 25 | 26 | 27 | Only visible for small AND extra large devices 28 | 29 | 30 | Only visible for small and more ([576px, 31 | Infinity[) 32 | 33 | 34 | Only visible for large or less ([0, 1200px]) 35 | 36 |
37 | 38 | ); 39 | } 40 | -------------------------------------------------------------------------------- /packages/tests/src/__tests__/__snapshots__/browser.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`browser test 1`] = ` 4 | " 5 | 6 | Only visible for extra small devices (portrait phones) 7 | 8 | Only visible for large or less ([0, 1200px]) 9 | 10 | Custom component 11 | 12 | xs 13 | 14 | Only visible for extra small devices (portrait phones) 15 | 16 | useBreakpoint() 17 | 18 | isXs: true 19 | 20 | isXsDown: true 21 | 22 | isXsUp: true 23 | 24 | isSm: false 25 | 26 | isSmDown: true 27 | 28 | isSmUp: false 29 | 30 | isMd: false 31 | 32 | isMdDown: true 33 | 34 | isMdUp: false 35 | 36 | isLg: false 37 | 38 | isLgDown: true 39 | 40 | isLgUp: false 41 | 42 | isXl: false 43 | 44 | isXlDown: true 45 | 46 | isXlUp: false 47 | 48 | (min-width:768px) and (max-width:992px),(max-width:576px): true 49 | 50 | wrong breakpoint: false 51 | 52 | wrong media query: false 53 | 54 | useBreakpoint() with heights 55 | 56 | isThin: true 57 | 58 | isThinDown: true 59 | 60 | isThinUp: true 61 | 62 | isNormal: false 63 | 64 | isNormalDown: true 65 | 66 | isNormalUp: false 67 | 68 | isBig: false 69 | 70 | isBigDown: true 71 | 72 | isBigUp: false" 73 | `; 74 | 75 | exports[`browser test 2`] = ` 76 | " 77 | 78 | Only visible for small devices (landscape phones) 79 | 80 | Only visible for small AND extra large devices 81 | 82 | Only visible for small and more ([576px, Infinity[) 83 | 84 | Only visible for large or less ([0, 1200px]) 85 | 86 | Custom component 87 | 88 | sm 89 | 90 | Only visible for small devices (landscape phones) 91 | 92 | sm xl 93 | 94 | Only visible for small AND extra large devices 95 | 96 | useBreakpoint() 97 | 98 | isXs: false 99 | 100 | isXsDown: false 101 | 102 | isXsUp: true 103 | 104 | isSm: true 105 | 106 | isSmDown: true 107 | 108 | isSmUp: true 109 | 110 | isMd: false 111 | 112 | isMdDown: true 113 | 114 | isMdUp: false 115 | 116 | isLg: false 117 | 118 | isLgDown: true 119 | 120 | isLgUp: false 121 | 122 | isXl: false 123 | 124 | isXlDown: true 125 | 126 | isXlUp: false 127 | 128 | (min-width:768px) and (max-width:992px),(max-width:576px): false 129 | 130 | wrong breakpoint: false 131 | 132 | wrong media query: false 133 | 134 | useBreakpoint() with heights 135 | 136 | isThin: false 137 | 138 | isThinDown: false 139 | 140 | isThinUp: true 141 | 142 | isNormal: true 143 | 144 | isNormalDown: true 145 | 146 | isNormalUp: true 147 | 148 | isBig: false 149 | 150 | isBigDown: true 151 | 152 | isBigUp: false" 153 | `; 154 | 155 | exports[`browser test 3`] = ` 156 | " 157 | 158 | Only visible for medium devices (tablets) 159 | 160 | Only visible for small and more ([576px, Infinity[) 161 | 162 | Only visible for large or less ([0, 1200px]) 163 | 164 | Custom component 165 | 166 | md 167 | 168 | Only visible for medium devices (tablets) 169 | 170 | useBreakpoint() 171 | 172 | isXs: false 173 | 174 | isXsDown: false 175 | 176 | isXsUp: true 177 | 178 | isSm: false 179 | 180 | isSmDown: false 181 | 182 | isSmUp: true 183 | 184 | isMd: true 185 | 186 | isMdDown: true 187 | 188 | isMdUp: true 189 | 190 | isLg: false 191 | 192 | isLgDown: true 193 | 194 | isLgUp: false 195 | 196 | isXl: false 197 | 198 | isXlDown: true 199 | 200 | isXlUp: false 201 | 202 | (min-width:768px) and (max-width:992px),(max-width:576px): true 203 | 204 | wrong breakpoint: false 205 | 206 | wrong media query: false 207 | 208 | useBreakpoint() with heights 209 | 210 | isThin: false 211 | 212 | isThinDown: false 213 | 214 | isThinUp: true 215 | 216 | isNormal: true 217 | 218 | isNormalDown: true 219 | 220 | isNormalUp: true 221 | 222 | isBig: false 223 | 224 | isBigDown: true 225 | 226 | isBigUp: false" 227 | `; 228 | 229 | exports[`browser test 4`] = ` 230 | " 231 | 232 | Only visible for large devices (desktops) 233 | 234 | Only visible for small and more ([576px, Infinity[) 235 | 236 | Only visible for large or less ([0, 1200px]) 237 | 238 | Custom component 239 | 240 | lg 241 | 242 | Only visible for large devices (desktops) 243 | 244 | useBreakpoint() 245 | 246 | isXs: false 247 | 248 | isXsDown: false 249 | 250 | isXsUp: true 251 | 252 | isSm: false 253 | 254 | isSmDown: false 255 | 256 | isSmUp: true 257 | 258 | isMd: false 259 | 260 | isMdDown: false 261 | 262 | isMdUp: true 263 | 264 | isLg: true 265 | 266 | isLgDown: true 267 | 268 | isLgUp: true 269 | 270 | isXl: false 271 | 272 | isXlDown: true 273 | 274 | isXlUp: false 275 | 276 | (min-width:768px) and (max-width:992px),(max-width:576px): false 277 | 278 | wrong breakpoint: false 279 | 280 | wrong media query: false 281 | 282 | useBreakpoint() with heights 283 | 284 | isThin: false 285 | 286 | isThinDown: false 287 | 288 | isThinUp: true 289 | 290 | isNormal: true 291 | 292 | isNormalDown: true 293 | 294 | isNormalUp: true 295 | 296 | isBig: false 297 | 298 | isBigDown: true 299 | 300 | isBigUp: false" 301 | `; 302 | 303 | exports[`browser test 5`] = ` 304 | " 305 | 306 | Only visible for extra large devices (large desktops) 307 | 308 | Only visible for small AND extra large devices 309 | 310 | Only visible for small and more ([576px, Infinity[) 311 | 312 | Custom component 313 | 314 | xl 315 | 316 | Only visible for extra large devices (large desktops) 317 | 318 | sm xl 319 | 320 | Only visible for small AND extra large devices 321 | 322 | useBreakpoint() 323 | 324 | isXs: false 325 | 326 | isXsDown: false 327 | 328 | isXsUp: true 329 | 330 | isSm: false 331 | 332 | isSmDown: false 333 | 334 | isSmUp: true 335 | 336 | isMd: false 337 | 338 | isMdDown: false 339 | 340 | isMdUp: true 341 | 342 | isLg: false 343 | 344 | isLgDown: false 345 | 346 | isLgUp: true 347 | 348 | isXl: true 349 | 350 | isXlDown: true 351 | 352 | isXlUp: true 353 | 354 | (min-width:768px) and (max-width:992px),(max-width:576px): false 355 | 356 | wrong breakpoint: false 357 | 358 | wrong media query: false 359 | 360 | useBreakpoint() with heights 361 | 362 | isThin: false 363 | 364 | isThinDown: false 365 | 366 | isThinUp: true 367 | 368 | isNormal: false 369 | 370 | isNormalDown: false 371 | 372 | isNormalUp: true 373 | 374 | isBig: true 375 | 376 | isBigDown: true 377 | 378 | isBigUp: true" 379 | `; 380 | -------------------------------------------------------------------------------- /packages/tests/src/__tests__/__snapshots__/ssr.ts.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`Should render in SSR {"height": 300, "width": 500} 1`] = ` 4 | " 5 | 6 | Only visible for extra small devices (portrait phones) 7 | 8 | Only visible for large or less ([0, 1200px]) 9 | 10 | Custom component 11 | 12 | xs 13 | 14 | Only visible for extra small devices (portrait phones) 15 | 16 | useBreakpoint() 17 | 18 | isXs: true 19 | 20 | isXsDown: true 21 | 22 | isXsUp: true 23 | 24 | isSm: false 25 | 26 | isSmDown: true 27 | 28 | isSmUp: false 29 | 30 | isMd: false 31 | 32 | isMdDown: true 33 | 34 | isMdUp: false 35 | 36 | isLg: false 37 | 38 | isLgDown: true 39 | 40 | isLgUp: false 41 | 42 | isXl: false 43 | 44 | isXlDown: true 45 | 46 | isXlUp: false 47 | 48 | (min-width:768px) and (max-width:992px),(max-width:576px): true 49 | 50 | wrong breakpoint: false 51 | 52 | wrong media query: false 53 | 54 | useBreakpoint() with heights 55 | 56 | isThin: true 57 | 58 | isThinDown: true 59 | 60 | isThinUp: true 61 | 62 | isNormal: false 63 | 64 | isNormalDown: true 65 | 66 | isNormalUp: false 67 | 68 | isBig: false 69 | 70 | isBigDown: true 71 | 72 | isBigUp: false 73 | 74 | " 75 | `; 76 | 77 | exports[`Should render in SSR {"height": 300, "width": 500} 2`] = ` 78 | " 79 | 80 | Only visible for small devices (landscape phones) 81 | 82 | Only visible for small AND extra large devices 83 | 84 | Only visible for small and more ([576px, Infinity[) 85 | 86 | Only visible for large or less ([0, 1200px]) 87 | 88 | Custom component 89 | 90 | sm 91 | 92 | Only visible for small devices (landscape phones) 93 | 94 | sm xl 95 | 96 | Only visible for small AND extra large devices 97 | 98 | useBreakpoint() 99 | 100 | isXs: false 101 | 102 | isXsDown: false 103 | 104 | isXsUp: true 105 | 106 | isSm: true 107 | 108 | isSmDown: true 109 | 110 | isSmUp: true 111 | 112 | isMd: false 113 | 114 | isMdDown: true 115 | 116 | isMdUp: false 117 | 118 | isLg: false 119 | 120 | isLgDown: true 121 | 122 | isLgUp: false 123 | 124 | isXl: false 125 | 126 | isXlDown: true 127 | 128 | isXlUp: false 129 | 130 | (min-width:768px) and (max-width:992px),(max-width:576px): false 131 | 132 | wrong breakpoint: false 133 | 134 | wrong media query: false 135 | 136 | useBreakpoint() with heights 137 | 138 | isThin: false 139 | 140 | isThinDown: false 141 | 142 | isThinUp: true 143 | 144 | isNormal: true 145 | 146 | isNormalDown: true 147 | 148 | isNormalUp: true 149 | 150 | isBig: false 151 | 152 | isBigDown: true 153 | 154 | isBigUp: false 155 | 156 | 157 | 158 | Only visible for small devices (landscape phones) 159 | 160 | Only visible for small AND extra large devices 161 | 162 | Only visible for small and more ([576px, Infinity[) 163 | 164 | Only visible for large or less ([0, 1200px]) 165 | 166 | Custom component 167 | 168 | sm 169 | 170 | Only visible for small devices (landscape phones) 171 | 172 | sm xl 173 | 174 | Only visible for small AND extra large devices 175 | 176 | useBreakpoint() 177 | 178 | isXs: false 179 | 180 | isXsDown: false 181 | 182 | isXsUp: true 183 | 184 | isSm: true 185 | 186 | isSmDown: true 187 | 188 | isSmUp: true 189 | 190 | isMd: false 191 | 192 | isMdDown: true 193 | 194 | isMdUp: false 195 | 196 | isLg: false 197 | 198 | isLgDown: true 199 | 200 | isLgUp: false 201 | 202 | isXl: false 203 | 204 | isXlDown: true 205 | 206 | isXlUp: false 207 | 208 | (min-width:768px) and (max-width:992px),(max-width:576px): false 209 | 210 | wrong breakpoint: false 211 | 212 | wrong media query: false 213 | 214 | useBreakpoint() with heights 215 | 216 | isThin: false 217 | 218 | isThinDown: false 219 | 220 | isThinUp: true 221 | 222 | isNormal: true 223 | 224 | isNormalDown: true 225 | 226 | isNormalUp: true 227 | 228 | isBig: false 229 | 230 | isBigDown: true 231 | 232 | isBigUp: false 233 | 234 | " 235 | `; 236 | 237 | exports[`Should render in SSR {"height": 300, "width": 500} 3`] = ` 238 | " 239 | 240 | Only visible for medium devices (tablets) 241 | 242 | Only visible for small and more ([576px, Infinity[) 243 | 244 | Only visible for large or less ([0, 1200px]) 245 | 246 | Custom component 247 | 248 | md 249 | 250 | Only visible for medium devices (tablets) 251 | 252 | useBreakpoint() 253 | 254 | isXs: false 255 | 256 | isXsDown: false 257 | 258 | isXsUp: true 259 | 260 | isSm: false 261 | 262 | isSmDown: false 263 | 264 | isSmUp: true 265 | 266 | isMd: true 267 | 268 | isMdDown: true 269 | 270 | isMdUp: true 271 | 272 | isLg: false 273 | 274 | isLgDown: true 275 | 276 | isLgUp: false 277 | 278 | isXl: false 279 | 280 | isXlDown: true 281 | 282 | isXlUp: false 283 | 284 | (min-width:768px) and (max-width:992px),(max-width:576px): true 285 | 286 | wrong breakpoint: false 287 | 288 | wrong media query: false 289 | 290 | useBreakpoint() with heights 291 | 292 | isThin: false 293 | 294 | isThinDown: false 295 | 296 | isThinUp: true 297 | 298 | isNormal: true 299 | 300 | isNormalDown: true 301 | 302 | isNormalUp: true 303 | 304 | isBig: false 305 | 306 | isBigDown: true 307 | 308 | isBigUp: false 309 | 310 | 311 | 312 | Only visible for medium devices (tablets) 313 | 314 | Only visible for small and more ([576px, Infinity[) 315 | 316 | Only visible for large or less ([0, 1200px]) 317 | 318 | Custom component 319 | 320 | md 321 | 322 | Only visible for medium devices (tablets) 323 | 324 | useBreakpoint() 325 | 326 | isXs: false 327 | 328 | isXsDown: false 329 | 330 | isXsUp: true 331 | 332 | isSm: false 333 | 334 | isSmDown: false 335 | 336 | isSmUp: true 337 | 338 | isMd: true 339 | 340 | isMdDown: true 341 | 342 | isMdUp: true 343 | 344 | isLg: false 345 | 346 | isLgDown: true 347 | 348 | isLgUp: false 349 | 350 | isXl: false 351 | 352 | isXlDown: true 353 | 354 | isXlUp: false 355 | 356 | (min-width:768px) and (max-width:992px),(max-width:576px): true 357 | 358 | wrong breakpoint: false 359 | 360 | wrong media query: false 361 | 362 | useBreakpoint() with heights 363 | 364 | isThin: false 365 | 366 | isThinDown: false 367 | 368 | isThinUp: true 369 | 370 | isNormal: true 371 | 372 | isNormalDown: true 373 | 374 | isNormalUp: true 375 | 376 | isBig: false 377 | 378 | isBigDown: true 379 | 380 | isBigUp: false 381 | 382 | 383 | 384 | Only visible for medium devices (tablets) 385 | 386 | Only visible for small and more ([576px, Infinity[) 387 | 388 | Only visible for large or less ([0, 1200px]) 389 | 390 | Custom component 391 | 392 | md 393 | 394 | Only visible for medium devices (tablets) 395 | 396 | useBreakpoint() 397 | 398 | isXs: false 399 | 400 | isXsDown: false 401 | 402 | isXsUp: true 403 | 404 | isSm: false 405 | 406 | isSmDown: false 407 | 408 | isSmUp: true 409 | 410 | isMd: true 411 | 412 | isMdDown: true 413 | 414 | isMdUp: true 415 | 416 | isLg: false 417 | 418 | isLgDown: true 419 | 420 | isLgUp: false 421 | 422 | isXl: false 423 | 424 | isXlDown: true 425 | 426 | isXlUp: false 427 | 428 | (min-width:768px) and (max-width:992px),(max-width:576px): true 429 | 430 | wrong breakpoint: false 431 | 432 | wrong media query: false 433 | 434 | useBreakpoint() with heights 435 | 436 | isThin: false 437 | 438 | isThinDown: false 439 | 440 | isThinUp: true 441 | 442 | isNormal: true 443 | 444 | isNormalDown: true 445 | 446 | isNormalUp: true 447 | 448 | isBig: false 449 | 450 | isBigDown: true 451 | 452 | isBigUp: false 453 | 454 | " 455 | `; 456 | 457 | exports[`Should render in SSR {"height": 300, "width": 500} 4`] = ` 458 | " 459 | 460 | Only visible for large devices (desktops) 461 | 462 | Only visible for small and more ([576px, Infinity[) 463 | 464 | Only visible for large or less ([0, 1200px]) 465 | 466 | Custom component 467 | 468 | lg 469 | 470 | Only visible for large devices (desktops) 471 | 472 | useBreakpoint() 473 | 474 | isXs: false 475 | 476 | isXsDown: false 477 | 478 | isXsUp: true 479 | 480 | isSm: false 481 | 482 | isSmDown: false 483 | 484 | isSmUp: true 485 | 486 | isMd: false 487 | 488 | isMdDown: false 489 | 490 | isMdUp: true 491 | 492 | isLg: true 493 | 494 | isLgDown: true 495 | 496 | isLgUp: true 497 | 498 | isXl: false 499 | 500 | isXlDown: true 501 | 502 | isXlUp: false 503 | 504 | (min-width:768px) and (max-width:992px),(max-width:576px): false 505 | 506 | wrong breakpoint: false 507 | 508 | wrong media query: false 509 | 510 | useBreakpoint() with heights 511 | 512 | isThin: false 513 | 514 | isThinDown: false 515 | 516 | isThinUp: true 517 | 518 | isNormal: true 519 | 520 | isNormalDown: true 521 | 522 | isNormalUp: true 523 | 524 | isBig: false 525 | 526 | isBigDown: true 527 | 528 | isBigUp: false 529 | 530 | 531 | 532 | Only visible for large devices (desktops) 533 | 534 | Only visible for small and more ([576px, Infinity[) 535 | 536 | Only visible for large or less ([0, 1200px]) 537 | 538 | Custom component 539 | 540 | lg 541 | 542 | Only visible for large devices (desktops) 543 | 544 | useBreakpoint() 545 | 546 | isXs: false 547 | 548 | isXsDown: false 549 | 550 | isXsUp: true 551 | 552 | isSm: false 553 | 554 | isSmDown: false 555 | 556 | isSmUp: true 557 | 558 | isMd: false 559 | 560 | isMdDown: false 561 | 562 | isMdUp: true 563 | 564 | isLg: true 565 | 566 | isLgDown: true 567 | 568 | isLgUp: true 569 | 570 | isXl: false 571 | 572 | isXlDown: true 573 | 574 | isXlUp: false 575 | 576 | (min-width:768px) and (max-width:992px),(max-width:576px): false 577 | 578 | wrong breakpoint: false 579 | 580 | wrong media query: false 581 | 582 | useBreakpoint() with heights 583 | 584 | isThin: false 585 | 586 | isThinDown: false 587 | 588 | isThinUp: true 589 | 590 | isNormal: true 591 | 592 | isNormalDown: true 593 | 594 | isNormalUp: true 595 | 596 | isBig: false 597 | 598 | isBigDown: true 599 | 600 | isBigUp: false 601 | 602 | 603 | 604 | Only visible for large devices (desktops) 605 | 606 | Only visible for small and more ([576px, Infinity[) 607 | 608 | Only visible for large or less ([0, 1200px]) 609 | 610 | Custom component 611 | 612 | lg 613 | 614 | Only visible for large devices (desktops) 615 | 616 | useBreakpoint() 617 | 618 | isXs: false 619 | 620 | isXsDown: false 621 | 622 | isXsUp: true 623 | 624 | isSm: false 625 | 626 | isSmDown: false 627 | 628 | isSmUp: true 629 | 630 | isMd: false 631 | 632 | isMdDown: false 633 | 634 | isMdUp: true 635 | 636 | isLg: true 637 | 638 | isLgDown: true 639 | 640 | isLgUp: true 641 | 642 | isXl: false 643 | 644 | isXlDown: true 645 | 646 | isXlUp: false 647 | 648 | (min-width:768px) and (max-width:992px),(max-width:576px): false 649 | 650 | wrong breakpoint: false 651 | 652 | wrong media query: false 653 | 654 | useBreakpoint() with heights 655 | 656 | isThin: false 657 | 658 | isThinDown: false 659 | 660 | isThinUp: true 661 | 662 | isNormal: true 663 | 664 | isNormalDown: true 665 | 666 | isNormalUp: true 667 | 668 | isBig: false 669 | 670 | isBigDown: true 671 | 672 | isBigUp: false 673 | 674 | 675 | 676 | Only visible for large devices (desktops) 677 | 678 | Only visible for small and more ([576px, Infinity[) 679 | 680 | Only visible for large or less ([0, 1200px]) 681 | 682 | Custom component 683 | 684 | lg 685 | 686 | Only visible for large devices (desktops) 687 | 688 | useBreakpoint() 689 | 690 | isXs: false 691 | 692 | isXsDown: false 693 | 694 | isXsUp: true 695 | 696 | isSm: false 697 | 698 | isSmDown: false 699 | 700 | isSmUp: true 701 | 702 | isMd: false 703 | 704 | isMdDown: false 705 | 706 | isMdUp: true 707 | 708 | isLg: true 709 | 710 | isLgDown: true 711 | 712 | isLgUp: true 713 | 714 | isXl: false 715 | 716 | isXlDown: true 717 | 718 | isXlUp: false 719 | 720 | (min-width:768px) and (max-width:992px),(max-width:576px): false 721 | 722 | wrong breakpoint: false 723 | 724 | wrong media query: false 725 | 726 | useBreakpoint() with heights 727 | 728 | isThin: false 729 | 730 | isThinDown: false 731 | 732 | isThinUp: true 733 | 734 | isNormal: true 735 | 736 | isNormalDown: true 737 | 738 | isNormalUp: true 739 | 740 | isBig: false 741 | 742 | isBigDown: true 743 | 744 | isBigUp: false 745 | 746 | " 747 | `; 748 | 749 | exports[`Should render in SSR {"height": 300, "width": 500} 5`] = ` 750 | " 751 | 752 | Only visible for extra large devices (large desktops) 753 | 754 | Only visible for small AND extra large devices 755 | 756 | Only visible for small and more ([576px, Infinity[) 757 | 758 | Custom component 759 | 760 | xl 761 | 762 | Only visible for extra large devices (large desktops) 763 | 764 | sm xl 765 | 766 | Only visible for small AND extra large devices 767 | 768 | useBreakpoint() 769 | 770 | isXs: false 771 | 772 | isXsDown: false 773 | 774 | isXsUp: true 775 | 776 | isSm: false 777 | 778 | isSmDown: false 779 | 780 | isSmUp: true 781 | 782 | isMd: false 783 | 784 | isMdDown: false 785 | 786 | isMdUp: true 787 | 788 | isLg: false 789 | 790 | isLgDown: false 791 | 792 | isLgUp: true 793 | 794 | isXl: true 795 | 796 | isXlDown: true 797 | 798 | isXlUp: true 799 | 800 | (min-width:768px) and (max-width:992px),(max-width:576px): false 801 | 802 | wrong breakpoint: false 803 | 804 | wrong media query: false 805 | 806 | useBreakpoint() with heights 807 | 808 | isThin: false 809 | 810 | isThinDown: false 811 | 812 | isThinUp: true 813 | 814 | isNormal: false 815 | 816 | isNormalDown: false 817 | 818 | isNormalUp: true 819 | 820 | isBig: true 821 | 822 | isBigDown: true 823 | 824 | isBigUp: true 825 | 826 | 827 | 828 | Only visible for extra large devices (large desktops) 829 | 830 | Only visible for small AND extra large devices 831 | 832 | Only visible for small and more ([576px, Infinity[) 833 | 834 | Custom component 835 | 836 | xl 837 | 838 | Only visible for extra large devices (large desktops) 839 | 840 | sm xl 841 | 842 | Only visible for small AND extra large devices 843 | 844 | useBreakpoint() 845 | 846 | isXs: false 847 | 848 | isXsDown: false 849 | 850 | isXsUp: true 851 | 852 | isSm: false 853 | 854 | isSmDown: false 855 | 856 | isSmUp: true 857 | 858 | isMd: false 859 | 860 | isMdDown: false 861 | 862 | isMdUp: true 863 | 864 | isLg: false 865 | 866 | isLgDown: false 867 | 868 | isLgUp: true 869 | 870 | isXl: true 871 | 872 | isXlDown: true 873 | 874 | isXlUp: true 875 | 876 | (min-width:768px) and (max-width:992px),(max-width:576px): false 877 | 878 | wrong breakpoint: false 879 | 880 | wrong media query: false 881 | 882 | useBreakpoint() with heights 883 | 884 | isThin: false 885 | 886 | isThinDown: false 887 | 888 | isThinUp: true 889 | 890 | isNormal: false 891 | 892 | isNormalDown: false 893 | 894 | isNormalUp: true 895 | 896 | isBig: true 897 | 898 | isBigDown: true 899 | 900 | isBigUp: true 901 | 902 | 903 | 904 | Only visible for extra large devices (large desktops) 905 | 906 | Only visible for small AND extra large devices 907 | 908 | Only visible for small and more ([576px, Infinity[) 909 | 910 | Custom component 911 | 912 | xl 913 | 914 | Only visible for extra large devices (large desktops) 915 | 916 | sm xl 917 | 918 | Only visible for small AND extra large devices 919 | 920 | useBreakpoint() 921 | 922 | isXs: false 923 | 924 | isXsDown: false 925 | 926 | isXsUp: true 927 | 928 | isSm: false 929 | 930 | isSmDown: false 931 | 932 | isSmUp: true 933 | 934 | isMd: false 935 | 936 | isMdDown: false 937 | 938 | isMdUp: true 939 | 940 | isLg: false 941 | 942 | isLgDown: false 943 | 944 | isLgUp: true 945 | 946 | isXl: true 947 | 948 | isXlDown: true 949 | 950 | isXlUp: true 951 | 952 | (min-width:768px) and (max-width:992px),(max-width:576px): false 953 | 954 | wrong breakpoint: false 955 | 956 | wrong media query: false 957 | 958 | useBreakpoint() with heights 959 | 960 | isThin: false 961 | 962 | isThinDown: false 963 | 964 | isThinUp: true 965 | 966 | isNormal: false 967 | 968 | isNormalDown: false 969 | 970 | isNormalUp: true 971 | 972 | isBig: true 973 | 974 | isBigDown: true 975 | 976 | isBigUp: true 977 | 978 | 979 | 980 | Only visible for extra large devices (large desktops) 981 | 982 | Only visible for small AND extra large devices 983 | 984 | Only visible for small and more ([576px, Infinity[) 985 | 986 | Custom component 987 | 988 | xl 989 | 990 | Only visible for extra large devices (large desktops) 991 | 992 | sm xl 993 | 994 | Only visible for small AND extra large devices 995 | 996 | useBreakpoint() 997 | 998 | isXs: false 999 | 1000 | isXsDown: false 1001 | 1002 | isXsUp: true 1003 | 1004 | isSm: false 1005 | 1006 | isSmDown: false 1007 | 1008 | isSmUp: true 1009 | 1010 | isMd: false 1011 | 1012 | isMdDown: false 1013 | 1014 | isMdUp: true 1015 | 1016 | isLg: false 1017 | 1018 | isLgDown: false 1019 | 1020 | isLgUp: true 1021 | 1022 | isXl: true 1023 | 1024 | isXlDown: true 1025 | 1026 | isXlUp: true 1027 | 1028 | (min-width:768px) and (max-width:992px),(max-width:576px): false 1029 | 1030 | wrong breakpoint: false 1031 | 1032 | wrong media query: false 1033 | 1034 | useBreakpoint() with heights 1035 | 1036 | isThin: false 1037 | 1038 | isThinDown: false 1039 | 1040 | isThinUp: true 1041 | 1042 | isNormal: false 1043 | 1044 | isNormalDown: false 1045 | 1046 | isNormalUp: true 1047 | 1048 | isBig: true 1049 | 1050 | isBigDown: true 1051 | 1052 | isBigUp: true 1053 | 1054 | 1055 | 1056 | Only visible for extra large devices (large desktops) 1057 | 1058 | Only visible for small AND extra large devices 1059 | 1060 | Only visible for small and more ([576px, Infinity[) 1061 | 1062 | Custom component 1063 | 1064 | xl 1065 | 1066 | Only visible for extra large devices (large desktops) 1067 | 1068 | sm xl 1069 | 1070 | Only visible for small AND extra large devices 1071 | 1072 | useBreakpoint() 1073 | 1074 | isXs: false 1075 | 1076 | isXsDown: false 1077 | 1078 | isXsUp: true 1079 | 1080 | isSm: false 1081 | 1082 | isSmDown: false 1083 | 1084 | isSmUp: true 1085 | 1086 | isMd: false 1087 | 1088 | isMdDown: false 1089 | 1090 | isMdUp: true 1091 | 1092 | isLg: false 1093 | 1094 | isLgDown: false 1095 | 1096 | isLgUp: true 1097 | 1098 | isXl: true 1099 | 1100 | isXlDown: true 1101 | 1102 | isXlUp: true 1103 | 1104 | (min-width:768px) and (max-width:992px),(max-width:576px): false 1105 | 1106 | wrong breakpoint: false 1107 | 1108 | wrong media query: false 1109 | 1110 | useBreakpoint() with heights 1111 | 1112 | isThin: false 1113 | 1114 | isThinDown: false 1115 | 1116 | isThinUp: true 1117 | 1118 | isNormal: false 1119 | 1120 | isNormalDown: false 1121 | 1122 | isNormalUp: true 1123 | 1124 | isBig: true 1125 | 1126 | isBigDown: true 1127 | 1128 | isBigUp: true 1129 | 1130 | " 1131 | `; 1132 | 1133 | exports[`Should render in SSR {"height": 550, "width": 750} 1`] = ` 1134 | " 1135 | 1136 | Only visible for extra small devices (portrait phones) 1137 | 1138 | Only visible for large or less ([0, 1200px]) 1139 | 1140 | Custom component 1141 | 1142 | xs 1143 | 1144 | Only visible for extra small devices (portrait phones) 1145 | 1146 | useBreakpoint() 1147 | 1148 | isXs: true 1149 | 1150 | isXsDown: true 1151 | 1152 | isXsUp: true 1153 | 1154 | isSm: false 1155 | 1156 | isSmDown: true 1157 | 1158 | isSmUp: false 1159 | 1160 | isMd: false 1161 | 1162 | isMdDown: true 1163 | 1164 | isMdUp: false 1165 | 1166 | isLg: false 1167 | 1168 | isLgDown: true 1169 | 1170 | isLgUp: false 1171 | 1172 | isXl: false 1173 | 1174 | isXlDown: true 1175 | 1176 | isXlUp: false 1177 | 1178 | (min-width:768px) and (max-width:992px),(max-width:576px): true 1179 | 1180 | wrong breakpoint: false 1181 | 1182 | wrong media query: false 1183 | 1184 | useBreakpoint() with heights 1185 | 1186 | isThin: true 1187 | 1188 | isThinDown: true 1189 | 1190 | isThinUp: true 1191 | 1192 | isNormal: false 1193 | 1194 | isNormalDown: true 1195 | 1196 | isNormalUp: false 1197 | 1198 | isBig: false 1199 | 1200 | isBigDown: true 1201 | 1202 | isBigUp: false 1203 | 1204 | " 1205 | `; 1206 | 1207 | exports[`Should render in SSR {"height": 550, "width": 750} 2`] = ` 1208 | " 1209 | 1210 | Only visible for small devices (landscape phones) 1211 | 1212 | Only visible for small AND extra large devices 1213 | 1214 | Only visible for small and more ([576px, Infinity[) 1215 | 1216 | Only visible for large or less ([0, 1200px]) 1217 | 1218 | Custom component 1219 | 1220 | sm 1221 | 1222 | Only visible for small devices (landscape phones) 1223 | 1224 | sm xl 1225 | 1226 | Only visible for small AND extra large devices 1227 | 1228 | useBreakpoint() 1229 | 1230 | isXs: false 1231 | 1232 | isXsDown: false 1233 | 1234 | isXsUp: true 1235 | 1236 | isSm: true 1237 | 1238 | isSmDown: true 1239 | 1240 | isSmUp: true 1241 | 1242 | isMd: false 1243 | 1244 | isMdDown: true 1245 | 1246 | isMdUp: false 1247 | 1248 | isLg: false 1249 | 1250 | isLgDown: true 1251 | 1252 | isLgUp: false 1253 | 1254 | isXl: false 1255 | 1256 | isXlDown: true 1257 | 1258 | isXlUp: false 1259 | 1260 | (min-width:768px) and (max-width:992px),(max-width:576px): false 1261 | 1262 | wrong breakpoint: false 1263 | 1264 | wrong media query: false 1265 | 1266 | useBreakpoint() with heights 1267 | 1268 | isThin: false 1269 | 1270 | isThinDown: false 1271 | 1272 | isThinUp: true 1273 | 1274 | isNormal: true 1275 | 1276 | isNormalDown: true 1277 | 1278 | isNormalUp: true 1279 | 1280 | isBig: false 1281 | 1282 | isBigDown: true 1283 | 1284 | isBigUp: false 1285 | 1286 | 1287 | 1288 | Only visible for small devices (landscape phones) 1289 | 1290 | Only visible for small AND extra large devices 1291 | 1292 | Only visible for small and more ([576px, Infinity[) 1293 | 1294 | Only visible for large or less ([0, 1200px]) 1295 | 1296 | Custom component 1297 | 1298 | sm 1299 | 1300 | Only visible for small devices (landscape phones) 1301 | 1302 | sm xl 1303 | 1304 | Only visible for small AND extra large devices 1305 | 1306 | useBreakpoint() 1307 | 1308 | isXs: false 1309 | 1310 | isXsDown: false 1311 | 1312 | isXsUp: true 1313 | 1314 | isSm: true 1315 | 1316 | isSmDown: true 1317 | 1318 | isSmUp: true 1319 | 1320 | isMd: false 1321 | 1322 | isMdDown: true 1323 | 1324 | isMdUp: false 1325 | 1326 | isLg: false 1327 | 1328 | isLgDown: true 1329 | 1330 | isLgUp: false 1331 | 1332 | isXl: false 1333 | 1334 | isXlDown: true 1335 | 1336 | isXlUp: false 1337 | 1338 | (min-width:768px) and (max-width:992px),(max-width:576px): false 1339 | 1340 | wrong breakpoint: false 1341 | 1342 | wrong media query: false 1343 | 1344 | useBreakpoint() with heights 1345 | 1346 | isThin: false 1347 | 1348 | isThinDown: false 1349 | 1350 | isThinUp: true 1351 | 1352 | isNormal: true 1353 | 1354 | isNormalDown: true 1355 | 1356 | isNormalUp: true 1357 | 1358 | isBig: false 1359 | 1360 | isBigDown: true 1361 | 1362 | isBigUp: false 1363 | 1364 | " 1365 | `; 1366 | 1367 | exports[`Should render in SSR {"height": 550, "width": 750} 3`] = ` 1368 | " 1369 | 1370 | Only visible for medium devices (tablets) 1371 | 1372 | Only visible for small and more ([576px, Infinity[) 1373 | 1374 | Only visible for large or less ([0, 1200px]) 1375 | 1376 | Custom component 1377 | 1378 | md 1379 | 1380 | Only visible for medium devices (tablets) 1381 | 1382 | useBreakpoint() 1383 | 1384 | isXs: false 1385 | 1386 | isXsDown: false 1387 | 1388 | isXsUp: true 1389 | 1390 | isSm: false 1391 | 1392 | isSmDown: false 1393 | 1394 | isSmUp: true 1395 | 1396 | isMd: true 1397 | 1398 | isMdDown: true 1399 | 1400 | isMdUp: true 1401 | 1402 | isLg: false 1403 | 1404 | isLgDown: true 1405 | 1406 | isLgUp: false 1407 | 1408 | isXl: false 1409 | 1410 | isXlDown: true 1411 | 1412 | isXlUp: false 1413 | 1414 | (min-width:768px) and (max-width:992px),(max-width:576px): true 1415 | 1416 | wrong breakpoint: false 1417 | 1418 | wrong media query: false 1419 | 1420 | useBreakpoint() with heights 1421 | 1422 | isThin: false 1423 | 1424 | isThinDown: false 1425 | 1426 | isThinUp: true 1427 | 1428 | isNormal: true 1429 | 1430 | isNormalDown: true 1431 | 1432 | isNormalUp: true 1433 | 1434 | isBig: false 1435 | 1436 | isBigDown: true 1437 | 1438 | isBigUp: false 1439 | 1440 | 1441 | 1442 | Only visible for medium devices (tablets) 1443 | 1444 | Only visible for small and more ([576px, Infinity[) 1445 | 1446 | Only visible for large or less ([0, 1200px]) 1447 | 1448 | Custom component 1449 | 1450 | md 1451 | 1452 | Only visible for medium devices (tablets) 1453 | 1454 | useBreakpoint() 1455 | 1456 | isXs: false 1457 | 1458 | isXsDown: false 1459 | 1460 | isXsUp: true 1461 | 1462 | isSm: false 1463 | 1464 | isSmDown: false 1465 | 1466 | isSmUp: true 1467 | 1468 | isMd: true 1469 | 1470 | isMdDown: true 1471 | 1472 | isMdUp: true 1473 | 1474 | isLg: false 1475 | 1476 | isLgDown: true 1477 | 1478 | isLgUp: false 1479 | 1480 | isXl: false 1481 | 1482 | isXlDown: true 1483 | 1484 | isXlUp: false 1485 | 1486 | (min-width:768px) and (max-width:992px),(max-width:576px): true 1487 | 1488 | wrong breakpoint: false 1489 | 1490 | wrong media query: false 1491 | 1492 | useBreakpoint() with heights 1493 | 1494 | isThin: false 1495 | 1496 | isThinDown: false 1497 | 1498 | isThinUp: true 1499 | 1500 | isNormal: true 1501 | 1502 | isNormalDown: true 1503 | 1504 | isNormalUp: true 1505 | 1506 | isBig: false 1507 | 1508 | isBigDown: true 1509 | 1510 | isBigUp: false 1511 | 1512 | 1513 | 1514 | Only visible for medium devices (tablets) 1515 | 1516 | Only visible for small and more ([576px, Infinity[) 1517 | 1518 | Only visible for large or less ([0, 1200px]) 1519 | 1520 | Custom component 1521 | 1522 | md 1523 | 1524 | Only visible for medium devices (tablets) 1525 | 1526 | useBreakpoint() 1527 | 1528 | isXs: false 1529 | 1530 | isXsDown: false 1531 | 1532 | isXsUp: true 1533 | 1534 | isSm: false 1535 | 1536 | isSmDown: false 1537 | 1538 | isSmUp: true 1539 | 1540 | isMd: true 1541 | 1542 | isMdDown: true 1543 | 1544 | isMdUp: true 1545 | 1546 | isLg: false 1547 | 1548 | isLgDown: true 1549 | 1550 | isLgUp: false 1551 | 1552 | isXl: false 1553 | 1554 | isXlDown: true 1555 | 1556 | isXlUp: false 1557 | 1558 | (min-width:768px) and (max-width:992px),(max-width:576px): true 1559 | 1560 | wrong breakpoint: false 1561 | 1562 | wrong media query: false 1563 | 1564 | useBreakpoint() with heights 1565 | 1566 | isThin: false 1567 | 1568 | isThinDown: false 1569 | 1570 | isThinUp: true 1571 | 1572 | isNormal: true 1573 | 1574 | isNormalDown: true 1575 | 1576 | isNormalUp: true 1577 | 1578 | isBig: false 1579 | 1580 | isBigDown: true 1581 | 1582 | isBigUp: false 1583 | 1584 | " 1585 | `; 1586 | 1587 | exports[`Should render in SSR {"height": 550, "width": 750} 4`] = ` 1588 | " 1589 | 1590 | Only visible for large devices (desktops) 1591 | 1592 | Only visible for small and more ([576px, Infinity[) 1593 | 1594 | Only visible for large or less ([0, 1200px]) 1595 | 1596 | Custom component 1597 | 1598 | lg 1599 | 1600 | Only visible for large devices (desktops) 1601 | 1602 | useBreakpoint() 1603 | 1604 | isXs: false 1605 | 1606 | isXsDown: false 1607 | 1608 | isXsUp: true 1609 | 1610 | isSm: false 1611 | 1612 | isSmDown: false 1613 | 1614 | isSmUp: true 1615 | 1616 | isMd: false 1617 | 1618 | isMdDown: false 1619 | 1620 | isMdUp: true 1621 | 1622 | isLg: true 1623 | 1624 | isLgDown: true 1625 | 1626 | isLgUp: true 1627 | 1628 | isXl: false 1629 | 1630 | isXlDown: true 1631 | 1632 | isXlUp: false 1633 | 1634 | (min-width:768px) and (max-width:992px),(max-width:576px): false 1635 | 1636 | wrong breakpoint: false 1637 | 1638 | wrong media query: false 1639 | 1640 | useBreakpoint() with heights 1641 | 1642 | isThin: false 1643 | 1644 | isThinDown: false 1645 | 1646 | isThinUp: true 1647 | 1648 | isNormal: true 1649 | 1650 | isNormalDown: true 1651 | 1652 | isNormalUp: true 1653 | 1654 | isBig: false 1655 | 1656 | isBigDown: true 1657 | 1658 | isBigUp: false 1659 | 1660 | 1661 | 1662 | Only visible for large devices (desktops) 1663 | 1664 | Only visible for small and more ([576px, Infinity[) 1665 | 1666 | Only visible for large or less ([0, 1200px]) 1667 | 1668 | Custom component 1669 | 1670 | lg 1671 | 1672 | Only visible for large devices (desktops) 1673 | 1674 | useBreakpoint() 1675 | 1676 | isXs: false 1677 | 1678 | isXsDown: false 1679 | 1680 | isXsUp: true 1681 | 1682 | isSm: false 1683 | 1684 | isSmDown: false 1685 | 1686 | isSmUp: true 1687 | 1688 | isMd: false 1689 | 1690 | isMdDown: false 1691 | 1692 | isMdUp: true 1693 | 1694 | isLg: true 1695 | 1696 | isLgDown: true 1697 | 1698 | isLgUp: true 1699 | 1700 | isXl: false 1701 | 1702 | isXlDown: true 1703 | 1704 | isXlUp: false 1705 | 1706 | (min-width:768px) and (max-width:992px),(max-width:576px): false 1707 | 1708 | wrong breakpoint: false 1709 | 1710 | wrong media query: false 1711 | 1712 | useBreakpoint() with heights 1713 | 1714 | isThin: false 1715 | 1716 | isThinDown: false 1717 | 1718 | isThinUp: true 1719 | 1720 | isNormal: true 1721 | 1722 | isNormalDown: true 1723 | 1724 | isNormalUp: true 1725 | 1726 | isBig: false 1727 | 1728 | isBigDown: true 1729 | 1730 | isBigUp: false 1731 | 1732 | 1733 | 1734 | Only visible for large devices (desktops) 1735 | 1736 | Only visible for small and more ([576px, Infinity[) 1737 | 1738 | Only visible for large or less ([0, 1200px]) 1739 | 1740 | Custom component 1741 | 1742 | lg 1743 | 1744 | Only visible for large devices (desktops) 1745 | 1746 | useBreakpoint() 1747 | 1748 | isXs: false 1749 | 1750 | isXsDown: false 1751 | 1752 | isXsUp: true 1753 | 1754 | isSm: false 1755 | 1756 | isSmDown: false 1757 | 1758 | isSmUp: true 1759 | 1760 | isMd: false 1761 | 1762 | isMdDown: false 1763 | 1764 | isMdUp: true 1765 | 1766 | isLg: true 1767 | 1768 | isLgDown: true 1769 | 1770 | isLgUp: true 1771 | 1772 | isXl: false 1773 | 1774 | isXlDown: true 1775 | 1776 | isXlUp: false 1777 | 1778 | (min-width:768px) and (max-width:992px),(max-width:576px): false 1779 | 1780 | wrong breakpoint: false 1781 | 1782 | wrong media query: false 1783 | 1784 | useBreakpoint() with heights 1785 | 1786 | isThin: false 1787 | 1788 | isThinDown: false 1789 | 1790 | isThinUp: true 1791 | 1792 | isNormal: true 1793 | 1794 | isNormalDown: true 1795 | 1796 | isNormalUp: true 1797 | 1798 | isBig: false 1799 | 1800 | isBigDown: true 1801 | 1802 | isBigUp: false 1803 | 1804 | 1805 | 1806 | Only visible for large devices (desktops) 1807 | 1808 | Only visible for small and more ([576px, Infinity[) 1809 | 1810 | Only visible for large or less ([0, 1200px]) 1811 | 1812 | Custom component 1813 | 1814 | lg 1815 | 1816 | Only visible for large devices (desktops) 1817 | 1818 | useBreakpoint() 1819 | 1820 | isXs: false 1821 | 1822 | isXsDown: false 1823 | 1824 | isXsUp: true 1825 | 1826 | isSm: false 1827 | 1828 | isSmDown: false 1829 | 1830 | isSmUp: true 1831 | 1832 | isMd: false 1833 | 1834 | isMdDown: false 1835 | 1836 | isMdUp: true 1837 | 1838 | isLg: true 1839 | 1840 | isLgDown: true 1841 | 1842 | isLgUp: true 1843 | 1844 | isXl: false 1845 | 1846 | isXlDown: true 1847 | 1848 | isXlUp: false 1849 | 1850 | (min-width:768px) and (max-width:992px),(max-width:576px): false 1851 | 1852 | wrong breakpoint: false 1853 | 1854 | wrong media query: false 1855 | 1856 | useBreakpoint() with heights 1857 | 1858 | isThin: false 1859 | 1860 | isThinDown: false 1861 | 1862 | isThinUp: true 1863 | 1864 | isNormal: true 1865 | 1866 | isNormalDown: true 1867 | 1868 | isNormalUp: true 1869 | 1870 | isBig: false 1871 | 1872 | isBigDown: true 1873 | 1874 | isBigUp: false 1875 | 1876 | " 1877 | `; 1878 | 1879 | exports[`Should render in SSR {"height": 550, "width": 750} 5`] = ` 1880 | " 1881 | 1882 | Only visible for extra large devices (large desktops) 1883 | 1884 | Only visible for small AND extra large devices 1885 | 1886 | Only visible for small and more ([576px, Infinity[) 1887 | 1888 | Custom component 1889 | 1890 | xl 1891 | 1892 | Only visible for extra large devices (large desktops) 1893 | 1894 | sm xl 1895 | 1896 | Only visible for small AND extra large devices 1897 | 1898 | useBreakpoint() 1899 | 1900 | isXs: false 1901 | 1902 | isXsDown: false 1903 | 1904 | isXsUp: true 1905 | 1906 | isSm: false 1907 | 1908 | isSmDown: false 1909 | 1910 | isSmUp: true 1911 | 1912 | isMd: false 1913 | 1914 | isMdDown: false 1915 | 1916 | isMdUp: true 1917 | 1918 | isLg: false 1919 | 1920 | isLgDown: false 1921 | 1922 | isLgUp: true 1923 | 1924 | isXl: true 1925 | 1926 | isXlDown: true 1927 | 1928 | isXlUp: true 1929 | 1930 | (min-width:768px) and (max-width:992px),(max-width:576px): false 1931 | 1932 | wrong breakpoint: false 1933 | 1934 | wrong media query: false 1935 | 1936 | useBreakpoint() with heights 1937 | 1938 | isThin: false 1939 | 1940 | isThinDown: false 1941 | 1942 | isThinUp: true 1943 | 1944 | isNormal: false 1945 | 1946 | isNormalDown: false 1947 | 1948 | isNormalUp: true 1949 | 1950 | isBig: true 1951 | 1952 | isBigDown: true 1953 | 1954 | isBigUp: true 1955 | 1956 | 1957 | 1958 | Only visible for extra large devices (large desktops) 1959 | 1960 | Only visible for small AND extra large devices 1961 | 1962 | Only visible for small and more ([576px, Infinity[) 1963 | 1964 | Custom component 1965 | 1966 | xl 1967 | 1968 | Only visible for extra large devices (large desktops) 1969 | 1970 | sm xl 1971 | 1972 | Only visible for small AND extra large devices 1973 | 1974 | useBreakpoint() 1975 | 1976 | isXs: false 1977 | 1978 | isXsDown: false 1979 | 1980 | isXsUp: true 1981 | 1982 | isSm: false 1983 | 1984 | isSmDown: false 1985 | 1986 | isSmUp: true 1987 | 1988 | isMd: false 1989 | 1990 | isMdDown: false 1991 | 1992 | isMdUp: true 1993 | 1994 | isLg: false 1995 | 1996 | isLgDown: false 1997 | 1998 | isLgUp: true 1999 | 2000 | isXl: true 2001 | 2002 | isXlDown: true 2003 | 2004 | isXlUp: true 2005 | 2006 | (min-width:768px) and (max-width:992px),(max-width:576px): false 2007 | 2008 | wrong breakpoint: false 2009 | 2010 | wrong media query: false 2011 | 2012 | useBreakpoint() with heights 2013 | 2014 | isThin: false 2015 | 2016 | isThinDown: false 2017 | 2018 | isThinUp: true 2019 | 2020 | isNormal: false 2021 | 2022 | isNormalDown: false 2023 | 2024 | isNormalUp: true 2025 | 2026 | isBig: true 2027 | 2028 | isBigDown: true 2029 | 2030 | isBigUp: true 2031 | 2032 | 2033 | 2034 | Only visible for extra large devices (large desktops) 2035 | 2036 | Only visible for small AND extra large devices 2037 | 2038 | Only visible for small and more ([576px, Infinity[) 2039 | 2040 | Custom component 2041 | 2042 | xl 2043 | 2044 | Only visible for extra large devices (large desktops) 2045 | 2046 | sm xl 2047 | 2048 | Only visible for small AND extra large devices 2049 | 2050 | useBreakpoint() 2051 | 2052 | isXs: false 2053 | 2054 | isXsDown: false 2055 | 2056 | isXsUp: true 2057 | 2058 | isSm: false 2059 | 2060 | isSmDown: false 2061 | 2062 | isSmUp: true 2063 | 2064 | isMd: false 2065 | 2066 | isMdDown: false 2067 | 2068 | isMdUp: true 2069 | 2070 | isLg: false 2071 | 2072 | isLgDown: false 2073 | 2074 | isLgUp: true 2075 | 2076 | isXl: true 2077 | 2078 | isXlDown: true 2079 | 2080 | isXlUp: true 2081 | 2082 | (min-width:768px) and (max-width:992px),(max-width:576px): false 2083 | 2084 | wrong breakpoint: false 2085 | 2086 | wrong media query: false 2087 | 2088 | useBreakpoint() with heights 2089 | 2090 | isThin: false 2091 | 2092 | isThinDown: false 2093 | 2094 | isThinUp: true 2095 | 2096 | isNormal: false 2097 | 2098 | isNormalDown: false 2099 | 2100 | isNormalUp: true 2101 | 2102 | isBig: true 2103 | 2104 | isBigDown: true 2105 | 2106 | isBigUp: true 2107 | 2108 | 2109 | 2110 | Only visible for extra large devices (large desktops) 2111 | 2112 | Only visible for small AND extra large devices 2113 | 2114 | Only visible for small and more ([576px, Infinity[) 2115 | 2116 | Custom component 2117 | 2118 | xl 2119 | 2120 | Only visible for extra large devices (large desktops) 2121 | 2122 | sm xl 2123 | 2124 | Only visible for small AND extra large devices 2125 | 2126 | useBreakpoint() 2127 | 2128 | isXs: false 2129 | 2130 | isXsDown: false 2131 | 2132 | isXsUp: true 2133 | 2134 | isSm: false 2135 | 2136 | isSmDown: false 2137 | 2138 | isSmUp: true 2139 | 2140 | isMd: false 2141 | 2142 | isMdDown: false 2143 | 2144 | isMdUp: true 2145 | 2146 | isLg: false 2147 | 2148 | isLgDown: false 2149 | 2150 | isLgUp: true 2151 | 2152 | isXl: true 2153 | 2154 | isXlDown: true 2155 | 2156 | isXlUp: true 2157 | 2158 | (min-width:768px) and (max-width:992px),(max-width:576px): false 2159 | 2160 | wrong breakpoint: false 2161 | 2162 | wrong media query: false 2163 | 2164 | useBreakpoint() with heights 2165 | 2166 | isThin: false 2167 | 2168 | isThinDown: false 2169 | 2170 | isThinUp: true 2171 | 2172 | isNormal: false 2173 | 2174 | isNormalDown: false 2175 | 2176 | isNormalUp: true 2177 | 2178 | isBig: true 2179 | 2180 | isBigDown: true 2181 | 2182 | isBigUp: true 2183 | 2184 | 2185 | 2186 | Only visible for extra large devices (large desktops) 2187 | 2188 | Only visible for small AND extra large devices 2189 | 2190 | Only visible for small and more ([576px, Infinity[) 2191 | 2192 | Custom component 2193 | 2194 | xl 2195 | 2196 | Only visible for extra large devices (large desktops) 2197 | 2198 | sm xl 2199 | 2200 | Only visible for small AND extra large devices 2201 | 2202 | useBreakpoint() 2203 | 2204 | isXs: false 2205 | 2206 | isXsDown: false 2207 | 2208 | isXsUp: true 2209 | 2210 | isSm: false 2211 | 2212 | isSmDown: false 2213 | 2214 | isSmUp: true 2215 | 2216 | isMd: false 2217 | 2218 | isMdDown: false 2219 | 2220 | isMdUp: true 2221 | 2222 | isLg: false 2223 | 2224 | isLgDown: false 2225 | 2226 | isLgUp: true 2227 | 2228 | isXl: true 2229 | 2230 | isXlDown: true 2231 | 2232 | isXlUp: true 2233 | 2234 | (min-width:768px) and (max-width:992px),(max-width:576px): false 2235 | 2236 | wrong breakpoint: false 2237 | 2238 | wrong media query: false 2239 | 2240 | useBreakpoint() with heights 2241 | 2242 | isThin: false 2243 | 2244 | isThinDown: false 2245 | 2246 | isThinUp: true 2247 | 2248 | isNormal: false 2249 | 2250 | isNormalDown: false 2251 | 2252 | isNormalUp: true 2253 | 2254 | isBig: true 2255 | 2256 | isBigDown: true 2257 | 2258 | isBigUp: true 2259 | 2260 | " 2261 | `; 2262 | 2263 | exports[`Should render in SSR {"height": 700, "width": 900} 1`] = ` 2264 | " 2265 | 2266 | Only visible for extra small devices (portrait phones) 2267 | 2268 | Only visible for large or less ([0, 1200px]) 2269 | 2270 | Custom component 2271 | 2272 | xs 2273 | 2274 | Only visible for extra small devices (portrait phones) 2275 | 2276 | useBreakpoint() 2277 | 2278 | isXs: true 2279 | 2280 | isXsDown: true 2281 | 2282 | isXsUp: true 2283 | 2284 | isSm: false 2285 | 2286 | isSmDown: true 2287 | 2288 | isSmUp: false 2289 | 2290 | isMd: false 2291 | 2292 | isMdDown: true 2293 | 2294 | isMdUp: false 2295 | 2296 | isLg: false 2297 | 2298 | isLgDown: true 2299 | 2300 | isLgUp: false 2301 | 2302 | isXl: false 2303 | 2304 | isXlDown: true 2305 | 2306 | isXlUp: false 2307 | 2308 | (min-width:768px) and (max-width:992px),(max-width:576px): true 2309 | 2310 | wrong breakpoint: false 2311 | 2312 | wrong media query: false 2313 | 2314 | useBreakpoint() with heights 2315 | 2316 | isThin: true 2317 | 2318 | isThinDown: true 2319 | 2320 | isThinUp: true 2321 | 2322 | isNormal: false 2323 | 2324 | isNormalDown: true 2325 | 2326 | isNormalUp: false 2327 | 2328 | isBig: false 2329 | 2330 | isBigDown: true 2331 | 2332 | isBigUp: false 2333 | 2334 | " 2335 | `; 2336 | 2337 | exports[`Should render in SSR {"height": 700, "width": 900} 2`] = ` 2338 | " 2339 | 2340 | Only visible for small devices (landscape phones) 2341 | 2342 | Only visible for small AND extra large devices 2343 | 2344 | Only visible for small and more ([576px, Infinity[) 2345 | 2346 | Only visible for large or less ([0, 1200px]) 2347 | 2348 | Custom component 2349 | 2350 | sm 2351 | 2352 | Only visible for small devices (landscape phones) 2353 | 2354 | sm xl 2355 | 2356 | Only visible for small AND extra large devices 2357 | 2358 | useBreakpoint() 2359 | 2360 | isXs: false 2361 | 2362 | isXsDown: false 2363 | 2364 | isXsUp: true 2365 | 2366 | isSm: true 2367 | 2368 | isSmDown: true 2369 | 2370 | isSmUp: true 2371 | 2372 | isMd: false 2373 | 2374 | isMdDown: true 2375 | 2376 | isMdUp: false 2377 | 2378 | isLg: false 2379 | 2380 | isLgDown: true 2381 | 2382 | isLgUp: false 2383 | 2384 | isXl: false 2385 | 2386 | isXlDown: true 2387 | 2388 | isXlUp: false 2389 | 2390 | (min-width:768px) and (max-width:992px),(max-width:576px): false 2391 | 2392 | wrong breakpoint: false 2393 | 2394 | wrong media query: false 2395 | 2396 | useBreakpoint() with heights 2397 | 2398 | isThin: false 2399 | 2400 | isThinDown: false 2401 | 2402 | isThinUp: true 2403 | 2404 | isNormal: true 2405 | 2406 | isNormalDown: true 2407 | 2408 | isNormalUp: true 2409 | 2410 | isBig: false 2411 | 2412 | isBigDown: true 2413 | 2414 | isBigUp: false 2415 | 2416 | 2417 | 2418 | Only visible for small devices (landscape phones) 2419 | 2420 | Only visible for small AND extra large devices 2421 | 2422 | Only visible for small and more ([576px, Infinity[) 2423 | 2424 | Only visible for large or less ([0, 1200px]) 2425 | 2426 | Custom component 2427 | 2428 | sm 2429 | 2430 | Only visible for small devices (landscape phones) 2431 | 2432 | sm xl 2433 | 2434 | Only visible for small AND extra large devices 2435 | 2436 | useBreakpoint() 2437 | 2438 | isXs: false 2439 | 2440 | isXsDown: false 2441 | 2442 | isXsUp: true 2443 | 2444 | isSm: true 2445 | 2446 | isSmDown: true 2447 | 2448 | isSmUp: true 2449 | 2450 | isMd: false 2451 | 2452 | isMdDown: true 2453 | 2454 | isMdUp: false 2455 | 2456 | isLg: false 2457 | 2458 | isLgDown: true 2459 | 2460 | isLgUp: false 2461 | 2462 | isXl: false 2463 | 2464 | isXlDown: true 2465 | 2466 | isXlUp: false 2467 | 2468 | (min-width:768px) and (max-width:992px),(max-width:576px): false 2469 | 2470 | wrong breakpoint: false 2471 | 2472 | wrong media query: false 2473 | 2474 | useBreakpoint() with heights 2475 | 2476 | isThin: false 2477 | 2478 | isThinDown: false 2479 | 2480 | isThinUp: true 2481 | 2482 | isNormal: true 2483 | 2484 | isNormalDown: true 2485 | 2486 | isNormalUp: true 2487 | 2488 | isBig: false 2489 | 2490 | isBigDown: true 2491 | 2492 | isBigUp: false 2493 | 2494 | " 2495 | `; 2496 | 2497 | exports[`Should render in SSR {"height": 700, "width": 900} 3`] = ` 2498 | " 2499 | 2500 | Only visible for medium devices (tablets) 2501 | 2502 | Only visible for small and more ([576px, Infinity[) 2503 | 2504 | Only visible for large or less ([0, 1200px]) 2505 | 2506 | Custom component 2507 | 2508 | md 2509 | 2510 | Only visible for medium devices (tablets) 2511 | 2512 | useBreakpoint() 2513 | 2514 | isXs: false 2515 | 2516 | isXsDown: false 2517 | 2518 | isXsUp: true 2519 | 2520 | isSm: false 2521 | 2522 | isSmDown: false 2523 | 2524 | isSmUp: true 2525 | 2526 | isMd: true 2527 | 2528 | isMdDown: true 2529 | 2530 | isMdUp: true 2531 | 2532 | isLg: false 2533 | 2534 | isLgDown: true 2535 | 2536 | isLgUp: false 2537 | 2538 | isXl: false 2539 | 2540 | isXlDown: true 2541 | 2542 | isXlUp: false 2543 | 2544 | (min-width:768px) and (max-width:992px),(max-width:576px): true 2545 | 2546 | wrong breakpoint: false 2547 | 2548 | wrong media query: false 2549 | 2550 | useBreakpoint() with heights 2551 | 2552 | isThin: false 2553 | 2554 | isThinDown: false 2555 | 2556 | isThinUp: true 2557 | 2558 | isNormal: true 2559 | 2560 | isNormalDown: true 2561 | 2562 | isNormalUp: true 2563 | 2564 | isBig: false 2565 | 2566 | isBigDown: true 2567 | 2568 | isBigUp: false 2569 | 2570 | 2571 | 2572 | Only visible for medium devices (tablets) 2573 | 2574 | Only visible for small and more ([576px, Infinity[) 2575 | 2576 | Only visible for large or less ([0, 1200px]) 2577 | 2578 | Custom component 2579 | 2580 | md 2581 | 2582 | Only visible for medium devices (tablets) 2583 | 2584 | useBreakpoint() 2585 | 2586 | isXs: false 2587 | 2588 | isXsDown: false 2589 | 2590 | isXsUp: true 2591 | 2592 | isSm: false 2593 | 2594 | isSmDown: false 2595 | 2596 | isSmUp: true 2597 | 2598 | isMd: true 2599 | 2600 | isMdDown: true 2601 | 2602 | isMdUp: true 2603 | 2604 | isLg: false 2605 | 2606 | isLgDown: true 2607 | 2608 | isLgUp: false 2609 | 2610 | isXl: false 2611 | 2612 | isXlDown: true 2613 | 2614 | isXlUp: false 2615 | 2616 | (min-width:768px) and (max-width:992px),(max-width:576px): true 2617 | 2618 | wrong breakpoint: false 2619 | 2620 | wrong media query: false 2621 | 2622 | useBreakpoint() with heights 2623 | 2624 | isThin: false 2625 | 2626 | isThinDown: false 2627 | 2628 | isThinUp: true 2629 | 2630 | isNormal: true 2631 | 2632 | isNormalDown: true 2633 | 2634 | isNormalUp: true 2635 | 2636 | isBig: false 2637 | 2638 | isBigDown: true 2639 | 2640 | isBigUp: false 2641 | 2642 | 2643 | 2644 | Only visible for medium devices (tablets) 2645 | 2646 | Only visible for small and more ([576px, Infinity[) 2647 | 2648 | Only visible for large or less ([0, 1200px]) 2649 | 2650 | Custom component 2651 | 2652 | md 2653 | 2654 | Only visible for medium devices (tablets) 2655 | 2656 | useBreakpoint() 2657 | 2658 | isXs: false 2659 | 2660 | isXsDown: false 2661 | 2662 | isXsUp: true 2663 | 2664 | isSm: false 2665 | 2666 | isSmDown: false 2667 | 2668 | isSmUp: true 2669 | 2670 | isMd: true 2671 | 2672 | isMdDown: true 2673 | 2674 | isMdUp: true 2675 | 2676 | isLg: false 2677 | 2678 | isLgDown: true 2679 | 2680 | isLgUp: false 2681 | 2682 | isXl: false 2683 | 2684 | isXlDown: true 2685 | 2686 | isXlUp: false 2687 | 2688 | (min-width:768px) and (max-width:992px),(max-width:576px): true 2689 | 2690 | wrong breakpoint: false 2691 | 2692 | wrong media query: false 2693 | 2694 | useBreakpoint() with heights 2695 | 2696 | isThin: false 2697 | 2698 | isThinDown: false 2699 | 2700 | isThinUp: true 2701 | 2702 | isNormal: true 2703 | 2704 | isNormalDown: true 2705 | 2706 | isNormalUp: true 2707 | 2708 | isBig: false 2709 | 2710 | isBigDown: true 2711 | 2712 | isBigUp: false 2713 | 2714 | " 2715 | `; 2716 | 2717 | exports[`Should render in SSR {"height": 700, "width": 900} 4`] = ` 2718 | " 2719 | 2720 | Only visible for large devices (desktops) 2721 | 2722 | Only visible for small and more ([576px, Infinity[) 2723 | 2724 | Only visible for large or less ([0, 1200px]) 2725 | 2726 | Custom component 2727 | 2728 | lg 2729 | 2730 | Only visible for large devices (desktops) 2731 | 2732 | useBreakpoint() 2733 | 2734 | isXs: false 2735 | 2736 | isXsDown: false 2737 | 2738 | isXsUp: true 2739 | 2740 | isSm: false 2741 | 2742 | isSmDown: false 2743 | 2744 | isSmUp: true 2745 | 2746 | isMd: false 2747 | 2748 | isMdDown: false 2749 | 2750 | isMdUp: true 2751 | 2752 | isLg: true 2753 | 2754 | isLgDown: true 2755 | 2756 | isLgUp: true 2757 | 2758 | isXl: false 2759 | 2760 | isXlDown: true 2761 | 2762 | isXlUp: false 2763 | 2764 | (min-width:768px) and (max-width:992px),(max-width:576px): false 2765 | 2766 | wrong breakpoint: false 2767 | 2768 | wrong media query: false 2769 | 2770 | useBreakpoint() with heights 2771 | 2772 | isThin: false 2773 | 2774 | isThinDown: false 2775 | 2776 | isThinUp: true 2777 | 2778 | isNormal: true 2779 | 2780 | isNormalDown: true 2781 | 2782 | isNormalUp: true 2783 | 2784 | isBig: false 2785 | 2786 | isBigDown: true 2787 | 2788 | isBigUp: false 2789 | 2790 | 2791 | 2792 | Only visible for large devices (desktops) 2793 | 2794 | Only visible for small and more ([576px, Infinity[) 2795 | 2796 | Only visible for large or less ([0, 1200px]) 2797 | 2798 | Custom component 2799 | 2800 | lg 2801 | 2802 | Only visible for large devices (desktops) 2803 | 2804 | useBreakpoint() 2805 | 2806 | isXs: false 2807 | 2808 | isXsDown: false 2809 | 2810 | isXsUp: true 2811 | 2812 | isSm: false 2813 | 2814 | isSmDown: false 2815 | 2816 | isSmUp: true 2817 | 2818 | isMd: false 2819 | 2820 | isMdDown: false 2821 | 2822 | isMdUp: true 2823 | 2824 | isLg: true 2825 | 2826 | isLgDown: true 2827 | 2828 | isLgUp: true 2829 | 2830 | isXl: false 2831 | 2832 | isXlDown: true 2833 | 2834 | isXlUp: false 2835 | 2836 | (min-width:768px) and (max-width:992px),(max-width:576px): false 2837 | 2838 | wrong breakpoint: false 2839 | 2840 | wrong media query: false 2841 | 2842 | useBreakpoint() with heights 2843 | 2844 | isThin: false 2845 | 2846 | isThinDown: false 2847 | 2848 | isThinUp: true 2849 | 2850 | isNormal: true 2851 | 2852 | isNormalDown: true 2853 | 2854 | isNormalUp: true 2855 | 2856 | isBig: false 2857 | 2858 | isBigDown: true 2859 | 2860 | isBigUp: false 2861 | 2862 | 2863 | 2864 | Only visible for large devices (desktops) 2865 | 2866 | Only visible for small and more ([576px, Infinity[) 2867 | 2868 | Only visible for large or less ([0, 1200px]) 2869 | 2870 | Custom component 2871 | 2872 | lg 2873 | 2874 | Only visible for large devices (desktops) 2875 | 2876 | useBreakpoint() 2877 | 2878 | isXs: false 2879 | 2880 | isXsDown: false 2881 | 2882 | isXsUp: true 2883 | 2884 | isSm: false 2885 | 2886 | isSmDown: false 2887 | 2888 | isSmUp: true 2889 | 2890 | isMd: false 2891 | 2892 | isMdDown: false 2893 | 2894 | isMdUp: true 2895 | 2896 | isLg: true 2897 | 2898 | isLgDown: true 2899 | 2900 | isLgUp: true 2901 | 2902 | isXl: false 2903 | 2904 | isXlDown: true 2905 | 2906 | isXlUp: false 2907 | 2908 | (min-width:768px) and (max-width:992px),(max-width:576px): false 2909 | 2910 | wrong breakpoint: false 2911 | 2912 | wrong media query: false 2913 | 2914 | useBreakpoint() with heights 2915 | 2916 | isThin: false 2917 | 2918 | isThinDown: false 2919 | 2920 | isThinUp: true 2921 | 2922 | isNormal: true 2923 | 2924 | isNormalDown: true 2925 | 2926 | isNormalUp: true 2927 | 2928 | isBig: false 2929 | 2930 | isBigDown: true 2931 | 2932 | isBigUp: false 2933 | 2934 | 2935 | 2936 | Only visible for large devices (desktops) 2937 | 2938 | Only visible for small and more ([576px, Infinity[) 2939 | 2940 | Only visible for large or less ([0, 1200px]) 2941 | 2942 | Custom component 2943 | 2944 | lg 2945 | 2946 | Only visible for large devices (desktops) 2947 | 2948 | useBreakpoint() 2949 | 2950 | isXs: false 2951 | 2952 | isXsDown: false 2953 | 2954 | isXsUp: true 2955 | 2956 | isSm: false 2957 | 2958 | isSmDown: false 2959 | 2960 | isSmUp: true 2961 | 2962 | isMd: false 2963 | 2964 | isMdDown: false 2965 | 2966 | isMdUp: true 2967 | 2968 | isLg: true 2969 | 2970 | isLgDown: true 2971 | 2972 | isLgUp: true 2973 | 2974 | isXl: false 2975 | 2976 | isXlDown: true 2977 | 2978 | isXlUp: false 2979 | 2980 | (min-width:768px) and (max-width:992px),(max-width:576px): false 2981 | 2982 | wrong breakpoint: false 2983 | 2984 | wrong media query: false 2985 | 2986 | useBreakpoint() with heights 2987 | 2988 | isThin: false 2989 | 2990 | isThinDown: false 2991 | 2992 | isThinUp: true 2993 | 2994 | isNormal: true 2995 | 2996 | isNormalDown: true 2997 | 2998 | isNormalUp: true 2999 | 3000 | isBig: false 3001 | 3002 | isBigDown: true 3003 | 3004 | isBigUp: false 3005 | 3006 | " 3007 | `; 3008 | 3009 | exports[`Should render in SSR {"height": 700, "width": 900} 5`] = ` 3010 | " 3011 | 3012 | Only visible for extra large devices (large desktops) 3013 | 3014 | Only visible for small AND extra large devices 3015 | 3016 | Only visible for small and more ([576px, Infinity[) 3017 | 3018 | Custom component 3019 | 3020 | xl 3021 | 3022 | Only visible for extra large devices (large desktops) 3023 | 3024 | sm xl 3025 | 3026 | Only visible for small AND extra large devices 3027 | 3028 | useBreakpoint() 3029 | 3030 | isXs: false 3031 | 3032 | isXsDown: false 3033 | 3034 | isXsUp: true 3035 | 3036 | isSm: false 3037 | 3038 | isSmDown: false 3039 | 3040 | isSmUp: true 3041 | 3042 | isMd: false 3043 | 3044 | isMdDown: false 3045 | 3046 | isMdUp: true 3047 | 3048 | isLg: false 3049 | 3050 | isLgDown: false 3051 | 3052 | isLgUp: true 3053 | 3054 | isXl: true 3055 | 3056 | isXlDown: true 3057 | 3058 | isXlUp: true 3059 | 3060 | (min-width:768px) and (max-width:992px),(max-width:576px): false 3061 | 3062 | wrong breakpoint: false 3063 | 3064 | wrong media query: false 3065 | 3066 | useBreakpoint() with heights 3067 | 3068 | isThin: false 3069 | 3070 | isThinDown: false 3071 | 3072 | isThinUp: true 3073 | 3074 | isNormal: false 3075 | 3076 | isNormalDown: false 3077 | 3078 | isNormalUp: true 3079 | 3080 | isBig: true 3081 | 3082 | isBigDown: true 3083 | 3084 | isBigUp: true 3085 | 3086 | 3087 | 3088 | Only visible for extra large devices (large desktops) 3089 | 3090 | Only visible for small AND extra large devices 3091 | 3092 | Only visible for small and more ([576px, Infinity[) 3093 | 3094 | Custom component 3095 | 3096 | xl 3097 | 3098 | Only visible for extra large devices (large desktops) 3099 | 3100 | sm xl 3101 | 3102 | Only visible for small AND extra large devices 3103 | 3104 | useBreakpoint() 3105 | 3106 | isXs: false 3107 | 3108 | isXsDown: false 3109 | 3110 | isXsUp: true 3111 | 3112 | isSm: false 3113 | 3114 | isSmDown: false 3115 | 3116 | isSmUp: true 3117 | 3118 | isMd: false 3119 | 3120 | isMdDown: false 3121 | 3122 | isMdUp: true 3123 | 3124 | isLg: false 3125 | 3126 | isLgDown: false 3127 | 3128 | isLgUp: true 3129 | 3130 | isXl: true 3131 | 3132 | isXlDown: true 3133 | 3134 | isXlUp: true 3135 | 3136 | (min-width:768px) and (max-width:992px),(max-width:576px): false 3137 | 3138 | wrong breakpoint: false 3139 | 3140 | wrong media query: false 3141 | 3142 | useBreakpoint() with heights 3143 | 3144 | isThin: false 3145 | 3146 | isThinDown: false 3147 | 3148 | isThinUp: true 3149 | 3150 | isNormal: false 3151 | 3152 | isNormalDown: false 3153 | 3154 | isNormalUp: true 3155 | 3156 | isBig: true 3157 | 3158 | isBigDown: true 3159 | 3160 | isBigUp: true 3161 | 3162 | 3163 | 3164 | Only visible for extra large devices (large desktops) 3165 | 3166 | Only visible for small AND extra large devices 3167 | 3168 | Only visible for small and more ([576px, Infinity[) 3169 | 3170 | Custom component 3171 | 3172 | xl 3173 | 3174 | Only visible for extra large devices (large desktops) 3175 | 3176 | sm xl 3177 | 3178 | Only visible for small AND extra large devices 3179 | 3180 | useBreakpoint() 3181 | 3182 | isXs: false 3183 | 3184 | isXsDown: false 3185 | 3186 | isXsUp: true 3187 | 3188 | isSm: false 3189 | 3190 | isSmDown: false 3191 | 3192 | isSmUp: true 3193 | 3194 | isMd: false 3195 | 3196 | isMdDown: false 3197 | 3198 | isMdUp: true 3199 | 3200 | isLg: false 3201 | 3202 | isLgDown: false 3203 | 3204 | isLgUp: true 3205 | 3206 | isXl: true 3207 | 3208 | isXlDown: true 3209 | 3210 | isXlUp: true 3211 | 3212 | (min-width:768px) and (max-width:992px),(max-width:576px): false 3213 | 3214 | wrong breakpoint: false 3215 | 3216 | wrong media query: false 3217 | 3218 | useBreakpoint() with heights 3219 | 3220 | isThin: false 3221 | 3222 | isThinDown: false 3223 | 3224 | isThinUp: true 3225 | 3226 | isNormal: false 3227 | 3228 | isNormalDown: false 3229 | 3230 | isNormalUp: true 3231 | 3232 | isBig: true 3233 | 3234 | isBigDown: true 3235 | 3236 | isBigUp: true 3237 | 3238 | 3239 | 3240 | Only visible for extra large devices (large desktops) 3241 | 3242 | Only visible for small AND extra large devices 3243 | 3244 | Only visible for small and more ([576px, Infinity[) 3245 | 3246 | Custom component 3247 | 3248 | xl 3249 | 3250 | Only visible for extra large devices (large desktops) 3251 | 3252 | sm xl 3253 | 3254 | Only visible for small AND extra large devices 3255 | 3256 | useBreakpoint() 3257 | 3258 | isXs: false 3259 | 3260 | isXsDown: false 3261 | 3262 | isXsUp: true 3263 | 3264 | isSm: false 3265 | 3266 | isSmDown: false 3267 | 3268 | isSmUp: true 3269 | 3270 | isMd: false 3271 | 3272 | isMdDown: false 3273 | 3274 | isMdUp: true 3275 | 3276 | isLg: false 3277 | 3278 | isLgDown: false 3279 | 3280 | isLgUp: true 3281 | 3282 | isXl: true 3283 | 3284 | isXlDown: true 3285 | 3286 | isXlUp: true 3287 | 3288 | (min-width:768px) and (max-width:992px),(max-width:576px): false 3289 | 3290 | wrong breakpoint: false 3291 | 3292 | wrong media query: false 3293 | 3294 | useBreakpoint() with heights 3295 | 3296 | isThin: false 3297 | 3298 | isThinDown: false 3299 | 3300 | isThinUp: true 3301 | 3302 | isNormal: false 3303 | 3304 | isNormalDown: false 3305 | 3306 | isNormalUp: true 3307 | 3308 | isBig: true 3309 | 3310 | isBigDown: true 3311 | 3312 | isBigUp: true 3313 | 3314 | 3315 | 3316 | Only visible for extra large devices (large desktops) 3317 | 3318 | Only visible for small AND extra large devices 3319 | 3320 | Only visible for small and more ([576px, Infinity[) 3321 | 3322 | Custom component 3323 | 3324 | xl 3325 | 3326 | Only visible for extra large devices (large desktops) 3327 | 3328 | sm xl 3329 | 3330 | Only visible for small AND extra large devices 3331 | 3332 | useBreakpoint() 3333 | 3334 | isXs: false 3335 | 3336 | isXsDown: false 3337 | 3338 | isXsUp: true 3339 | 3340 | isSm: false 3341 | 3342 | isSmDown: false 3343 | 3344 | isSmUp: true 3345 | 3346 | isMd: false 3347 | 3348 | isMdDown: false 3349 | 3350 | isMdUp: true 3351 | 3352 | isLg: false 3353 | 3354 | isLgDown: false 3355 | 3356 | isLgUp: true 3357 | 3358 | isXl: true 3359 | 3360 | isXlDown: true 3361 | 3362 | isXlUp: true 3363 | 3364 | (min-width:768px) and (max-width:992px),(max-width:576px): false 3365 | 3366 | wrong breakpoint: false 3367 | 3368 | wrong media query: false 3369 | 3370 | useBreakpoint() with heights 3371 | 3372 | isThin: false 3373 | 3374 | isThinDown: false 3375 | 3376 | isThinUp: true 3377 | 3378 | isNormal: false 3379 | 3380 | isNormalDown: false 3381 | 3382 | isNormalUp: true 3383 | 3384 | isBig: true 3385 | 3386 | isBigDown: true 3387 | 3388 | isBigUp: true 3389 | 3390 | " 3391 | `; 3392 | 3393 | exports[`Should render in SSR {"height": 800, "width": 1000} 1`] = ` 3394 | " 3395 | 3396 | Only visible for extra small devices (portrait phones) 3397 | 3398 | Only visible for large or less ([0, 1200px]) 3399 | 3400 | Custom component 3401 | 3402 | xs 3403 | 3404 | Only visible for extra small devices (portrait phones) 3405 | 3406 | useBreakpoint() 3407 | 3408 | isXs: true 3409 | 3410 | isXsDown: true 3411 | 3412 | isXsUp: true 3413 | 3414 | isSm: false 3415 | 3416 | isSmDown: true 3417 | 3418 | isSmUp: false 3419 | 3420 | isMd: false 3421 | 3422 | isMdDown: true 3423 | 3424 | isMdUp: false 3425 | 3426 | isLg: false 3427 | 3428 | isLgDown: true 3429 | 3430 | isLgUp: false 3431 | 3432 | isXl: false 3433 | 3434 | isXlDown: true 3435 | 3436 | isXlUp: false 3437 | 3438 | (min-width:768px) and (max-width:992px),(max-width:576px): true 3439 | 3440 | wrong breakpoint: false 3441 | 3442 | wrong media query: false 3443 | 3444 | useBreakpoint() with heights 3445 | 3446 | isThin: true 3447 | 3448 | isThinDown: true 3449 | 3450 | isThinUp: true 3451 | 3452 | isNormal: false 3453 | 3454 | isNormalDown: true 3455 | 3456 | isNormalUp: false 3457 | 3458 | isBig: false 3459 | 3460 | isBigDown: true 3461 | 3462 | isBigUp: false 3463 | 3464 | " 3465 | `; 3466 | 3467 | exports[`Should render in SSR {"height": 800, "width": 1000} 2`] = ` 3468 | " 3469 | 3470 | Only visible for small devices (landscape phones) 3471 | 3472 | Only visible for small AND extra large devices 3473 | 3474 | Only visible for small and more ([576px, Infinity[) 3475 | 3476 | Only visible for large or less ([0, 1200px]) 3477 | 3478 | Custom component 3479 | 3480 | sm 3481 | 3482 | Only visible for small devices (landscape phones) 3483 | 3484 | sm xl 3485 | 3486 | Only visible for small AND extra large devices 3487 | 3488 | useBreakpoint() 3489 | 3490 | isXs: false 3491 | 3492 | isXsDown: false 3493 | 3494 | isXsUp: true 3495 | 3496 | isSm: true 3497 | 3498 | isSmDown: true 3499 | 3500 | isSmUp: true 3501 | 3502 | isMd: false 3503 | 3504 | isMdDown: true 3505 | 3506 | isMdUp: false 3507 | 3508 | isLg: false 3509 | 3510 | isLgDown: true 3511 | 3512 | isLgUp: false 3513 | 3514 | isXl: false 3515 | 3516 | isXlDown: true 3517 | 3518 | isXlUp: false 3519 | 3520 | (min-width:768px) and (max-width:992px),(max-width:576px): false 3521 | 3522 | wrong breakpoint: false 3523 | 3524 | wrong media query: false 3525 | 3526 | useBreakpoint() with heights 3527 | 3528 | isThin: false 3529 | 3530 | isThinDown: false 3531 | 3532 | isThinUp: true 3533 | 3534 | isNormal: true 3535 | 3536 | isNormalDown: true 3537 | 3538 | isNormalUp: true 3539 | 3540 | isBig: false 3541 | 3542 | isBigDown: true 3543 | 3544 | isBigUp: false 3545 | 3546 | 3547 | 3548 | Only visible for small devices (landscape phones) 3549 | 3550 | Only visible for small AND extra large devices 3551 | 3552 | Only visible for small and more ([576px, Infinity[) 3553 | 3554 | Only visible for large or less ([0, 1200px]) 3555 | 3556 | Custom component 3557 | 3558 | sm 3559 | 3560 | Only visible for small devices (landscape phones) 3561 | 3562 | sm xl 3563 | 3564 | Only visible for small AND extra large devices 3565 | 3566 | useBreakpoint() 3567 | 3568 | isXs: false 3569 | 3570 | isXsDown: false 3571 | 3572 | isXsUp: true 3573 | 3574 | isSm: true 3575 | 3576 | isSmDown: true 3577 | 3578 | isSmUp: true 3579 | 3580 | isMd: false 3581 | 3582 | isMdDown: true 3583 | 3584 | isMdUp: false 3585 | 3586 | isLg: false 3587 | 3588 | isLgDown: true 3589 | 3590 | isLgUp: false 3591 | 3592 | isXl: false 3593 | 3594 | isXlDown: true 3595 | 3596 | isXlUp: false 3597 | 3598 | (min-width:768px) and (max-width:992px),(max-width:576px): false 3599 | 3600 | wrong breakpoint: false 3601 | 3602 | wrong media query: false 3603 | 3604 | useBreakpoint() with heights 3605 | 3606 | isThin: false 3607 | 3608 | isThinDown: false 3609 | 3610 | isThinUp: true 3611 | 3612 | isNormal: true 3613 | 3614 | isNormalDown: true 3615 | 3616 | isNormalUp: true 3617 | 3618 | isBig: false 3619 | 3620 | isBigDown: true 3621 | 3622 | isBigUp: false 3623 | 3624 | " 3625 | `; 3626 | 3627 | exports[`Should render in SSR {"height": 800, "width": 1000} 3`] = ` 3628 | " 3629 | 3630 | Only visible for medium devices (tablets) 3631 | 3632 | Only visible for small and more ([576px, Infinity[) 3633 | 3634 | Only visible for large or less ([0, 1200px]) 3635 | 3636 | Custom component 3637 | 3638 | md 3639 | 3640 | Only visible for medium devices (tablets) 3641 | 3642 | useBreakpoint() 3643 | 3644 | isXs: false 3645 | 3646 | isXsDown: false 3647 | 3648 | isXsUp: true 3649 | 3650 | isSm: false 3651 | 3652 | isSmDown: false 3653 | 3654 | isSmUp: true 3655 | 3656 | isMd: true 3657 | 3658 | isMdDown: true 3659 | 3660 | isMdUp: true 3661 | 3662 | isLg: false 3663 | 3664 | isLgDown: true 3665 | 3666 | isLgUp: false 3667 | 3668 | isXl: false 3669 | 3670 | isXlDown: true 3671 | 3672 | isXlUp: false 3673 | 3674 | (min-width:768px) and (max-width:992px),(max-width:576px): true 3675 | 3676 | wrong breakpoint: false 3677 | 3678 | wrong media query: false 3679 | 3680 | useBreakpoint() with heights 3681 | 3682 | isThin: false 3683 | 3684 | isThinDown: false 3685 | 3686 | isThinUp: true 3687 | 3688 | isNormal: true 3689 | 3690 | isNormalDown: true 3691 | 3692 | isNormalUp: true 3693 | 3694 | isBig: false 3695 | 3696 | isBigDown: true 3697 | 3698 | isBigUp: false 3699 | 3700 | 3701 | 3702 | Only visible for medium devices (tablets) 3703 | 3704 | Only visible for small and more ([576px, Infinity[) 3705 | 3706 | Only visible for large or less ([0, 1200px]) 3707 | 3708 | Custom component 3709 | 3710 | md 3711 | 3712 | Only visible for medium devices (tablets) 3713 | 3714 | useBreakpoint() 3715 | 3716 | isXs: false 3717 | 3718 | isXsDown: false 3719 | 3720 | isXsUp: true 3721 | 3722 | isSm: false 3723 | 3724 | isSmDown: false 3725 | 3726 | isSmUp: true 3727 | 3728 | isMd: true 3729 | 3730 | isMdDown: true 3731 | 3732 | isMdUp: true 3733 | 3734 | isLg: false 3735 | 3736 | isLgDown: true 3737 | 3738 | isLgUp: false 3739 | 3740 | isXl: false 3741 | 3742 | isXlDown: true 3743 | 3744 | isXlUp: false 3745 | 3746 | (min-width:768px) and (max-width:992px),(max-width:576px): true 3747 | 3748 | wrong breakpoint: false 3749 | 3750 | wrong media query: false 3751 | 3752 | useBreakpoint() with heights 3753 | 3754 | isThin: false 3755 | 3756 | isThinDown: false 3757 | 3758 | isThinUp: true 3759 | 3760 | isNormal: true 3761 | 3762 | isNormalDown: true 3763 | 3764 | isNormalUp: true 3765 | 3766 | isBig: false 3767 | 3768 | isBigDown: true 3769 | 3770 | isBigUp: false 3771 | 3772 | 3773 | 3774 | Only visible for medium devices (tablets) 3775 | 3776 | Only visible for small and more ([576px, Infinity[) 3777 | 3778 | Only visible for large or less ([0, 1200px]) 3779 | 3780 | Custom component 3781 | 3782 | md 3783 | 3784 | Only visible for medium devices (tablets) 3785 | 3786 | useBreakpoint() 3787 | 3788 | isXs: false 3789 | 3790 | isXsDown: false 3791 | 3792 | isXsUp: true 3793 | 3794 | isSm: false 3795 | 3796 | isSmDown: false 3797 | 3798 | isSmUp: true 3799 | 3800 | isMd: true 3801 | 3802 | isMdDown: true 3803 | 3804 | isMdUp: true 3805 | 3806 | isLg: false 3807 | 3808 | isLgDown: true 3809 | 3810 | isLgUp: false 3811 | 3812 | isXl: false 3813 | 3814 | isXlDown: true 3815 | 3816 | isXlUp: false 3817 | 3818 | (min-width:768px) and (max-width:992px),(max-width:576px): true 3819 | 3820 | wrong breakpoint: false 3821 | 3822 | wrong media query: false 3823 | 3824 | useBreakpoint() with heights 3825 | 3826 | isThin: false 3827 | 3828 | isThinDown: false 3829 | 3830 | isThinUp: true 3831 | 3832 | isNormal: true 3833 | 3834 | isNormalDown: true 3835 | 3836 | isNormalUp: true 3837 | 3838 | isBig: false 3839 | 3840 | isBigDown: true 3841 | 3842 | isBigUp: false 3843 | 3844 | " 3845 | `; 3846 | 3847 | exports[`Should render in SSR {"height": 800, "width": 1000} 4`] = ` 3848 | " 3849 | 3850 | Only visible for large devices (desktops) 3851 | 3852 | Only visible for small and more ([576px, Infinity[) 3853 | 3854 | Only visible for large or less ([0, 1200px]) 3855 | 3856 | Custom component 3857 | 3858 | lg 3859 | 3860 | Only visible for large devices (desktops) 3861 | 3862 | useBreakpoint() 3863 | 3864 | isXs: false 3865 | 3866 | isXsDown: false 3867 | 3868 | isXsUp: true 3869 | 3870 | isSm: false 3871 | 3872 | isSmDown: false 3873 | 3874 | isSmUp: true 3875 | 3876 | isMd: false 3877 | 3878 | isMdDown: false 3879 | 3880 | isMdUp: true 3881 | 3882 | isLg: true 3883 | 3884 | isLgDown: true 3885 | 3886 | isLgUp: true 3887 | 3888 | isXl: false 3889 | 3890 | isXlDown: true 3891 | 3892 | isXlUp: false 3893 | 3894 | (min-width:768px) and (max-width:992px),(max-width:576px): false 3895 | 3896 | wrong breakpoint: false 3897 | 3898 | wrong media query: false 3899 | 3900 | useBreakpoint() with heights 3901 | 3902 | isThin: false 3903 | 3904 | isThinDown: false 3905 | 3906 | isThinUp: true 3907 | 3908 | isNormal: true 3909 | 3910 | isNormalDown: true 3911 | 3912 | isNormalUp: true 3913 | 3914 | isBig: false 3915 | 3916 | isBigDown: true 3917 | 3918 | isBigUp: false 3919 | 3920 | 3921 | 3922 | Only visible for large devices (desktops) 3923 | 3924 | Only visible for small and more ([576px, Infinity[) 3925 | 3926 | Only visible for large or less ([0, 1200px]) 3927 | 3928 | Custom component 3929 | 3930 | lg 3931 | 3932 | Only visible for large devices (desktops) 3933 | 3934 | useBreakpoint() 3935 | 3936 | isXs: false 3937 | 3938 | isXsDown: false 3939 | 3940 | isXsUp: true 3941 | 3942 | isSm: false 3943 | 3944 | isSmDown: false 3945 | 3946 | isSmUp: true 3947 | 3948 | isMd: false 3949 | 3950 | isMdDown: false 3951 | 3952 | isMdUp: true 3953 | 3954 | isLg: true 3955 | 3956 | isLgDown: true 3957 | 3958 | isLgUp: true 3959 | 3960 | isXl: false 3961 | 3962 | isXlDown: true 3963 | 3964 | isXlUp: false 3965 | 3966 | (min-width:768px) and (max-width:992px),(max-width:576px): false 3967 | 3968 | wrong breakpoint: false 3969 | 3970 | wrong media query: false 3971 | 3972 | useBreakpoint() with heights 3973 | 3974 | isThin: false 3975 | 3976 | isThinDown: false 3977 | 3978 | isThinUp: true 3979 | 3980 | isNormal: true 3981 | 3982 | isNormalDown: true 3983 | 3984 | isNormalUp: true 3985 | 3986 | isBig: false 3987 | 3988 | isBigDown: true 3989 | 3990 | isBigUp: false 3991 | 3992 | 3993 | 3994 | Only visible for large devices (desktops) 3995 | 3996 | Only visible for small and more ([576px, Infinity[) 3997 | 3998 | Only visible for large or less ([0, 1200px]) 3999 | 4000 | Custom component 4001 | 4002 | lg 4003 | 4004 | Only visible for large devices (desktops) 4005 | 4006 | useBreakpoint() 4007 | 4008 | isXs: false 4009 | 4010 | isXsDown: false 4011 | 4012 | isXsUp: true 4013 | 4014 | isSm: false 4015 | 4016 | isSmDown: false 4017 | 4018 | isSmUp: true 4019 | 4020 | isMd: false 4021 | 4022 | isMdDown: false 4023 | 4024 | isMdUp: true 4025 | 4026 | isLg: true 4027 | 4028 | isLgDown: true 4029 | 4030 | isLgUp: true 4031 | 4032 | isXl: false 4033 | 4034 | isXlDown: true 4035 | 4036 | isXlUp: false 4037 | 4038 | (min-width:768px) and (max-width:992px),(max-width:576px): false 4039 | 4040 | wrong breakpoint: false 4041 | 4042 | wrong media query: false 4043 | 4044 | useBreakpoint() with heights 4045 | 4046 | isThin: false 4047 | 4048 | isThinDown: false 4049 | 4050 | isThinUp: true 4051 | 4052 | isNormal: true 4053 | 4054 | isNormalDown: true 4055 | 4056 | isNormalUp: true 4057 | 4058 | isBig: false 4059 | 4060 | isBigDown: true 4061 | 4062 | isBigUp: false 4063 | 4064 | 4065 | 4066 | Only visible for large devices (desktops) 4067 | 4068 | Only visible for small and more ([576px, Infinity[) 4069 | 4070 | Only visible for large or less ([0, 1200px]) 4071 | 4072 | Custom component 4073 | 4074 | lg 4075 | 4076 | Only visible for large devices (desktops) 4077 | 4078 | useBreakpoint() 4079 | 4080 | isXs: false 4081 | 4082 | isXsDown: false 4083 | 4084 | isXsUp: true 4085 | 4086 | isSm: false 4087 | 4088 | isSmDown: false 4089 | 4090 | isSmUp: true 4091 | 4092 | isMd: false 4093 | 4094 | isMdDown: false 4095 | 4096 | isMdUp: true 4097 | 4098 | isLg: true 4099 | 4100 | isLgDown: true 4101 | 4102 | isLgUp: true 4103 | 4104 | isXl: false 4105 | 4106 | isXlDown: true 4107 | 4108 | isXlUp: false 4109 | 4110 | (min-width:768px) and (max-width:992px),(max-width:576px): false 4111 | 4112 | wrong breakpoint: false 4113 | 4114 | wrong media query: false 4115 | 4116 | useBreakpoint() with heights 4117 | 4118 | isThin: false 4119 | 4120 | isThinDown: false 4121 | 4122 | isThinUp: true 4123 | 4124 | isNormal: true 4125 | 4126 | isNormalDown: true 4127 | 4128 | isNormalUp: true 4129 | 4130 | isBig: false 4131 | 4132 | isBigDown: true 4133 | 4134 | isBigUp: false 4135 | 4136 | " 4137 | `; 4138 | 4139 | exports[`Should render in SSR {"height": 800, "width": 1000} 5`] = ` 4140 | " 4141 | 4142 | Only visible for extra large devices (large desktops) 4143 | 4144 | Only visible for small AND extra large devices 4145 | 4146 | Only visible for small and more ([576px, Infinity[) 4147 | 4148 | Custom component 4149 | 4150 | xl 4151 | 4152 | Only visible for extra large devices (large desktops) 4153 | 4154 | sm xl 4155 | 4156 | Only visible for small AND extra large devices 4157 | 4158 | useBreakpoint() 4159 | 4160 | isXs: false 4161 | 4162 | isXsDown: false 4163 | 4164 | isXsUp: true 4165 | 4166 | isSm: false 4167 | 4168 | isSmDown: false 4169 | 4170 | isSmUp: true 4171 | 4172 | isMd: false 4173 | 4174 | isMdDown: false 4175 | 4176 | isMdUp: true 4177 | 4178 | isLg: false 4179 | 4180 | isLgDown: false 4181 | 4182 | isLgUp: true 4183 | 4184 | isXl: true 4185 | 4186 | isXlDown: true 4187 | 4188 | isXlUp: true 4189 | 4190 | (min-width:768px) and (max-width:992px),(max-width:576px): false 4191 | 4192 | wrong breakpoint: false 4193 | 4194 | wrong media query: false 4195 | 4196 | useBreakpoint() with heights 4197 | 4198 | isThin: false 4199 | 4200 | isThinDown: false 4201 | 4202 | isThinUp: true 4203 | 4204 | isNormal: false 4205 | 4206 | isNormalDown: false 4207 | 4208 | isNormalUp: true 4209 | 4210 | isBig: true 4211 | 4212 | isBigDown: true 4213 | 4214 | isBigUp: true 4215 | 4216 | 4217 | 4218 | Only visible for extra large devices (large desktops) 4219 | 4220 | Only visible for small AND extra large devices 4221 | 4222 | Only visible for small and more ([576px, Infinity[) 4223 | 4224 | Custom component 4225 | 4226 | xl 4227 | 4228 | Only visible for extra large devices (large desktops) 4229 | 4230 | sm xl 4231 | 4232 | Only visible for small AND extra large devices 4233 | 4234 | useBreakpoint() 4235 | 4236 | isXs: false 4237 | 4238 | isXsDown: false 4239 | 4240 | isXsUp: true 4241 | 4242 | isSm: false 4243 | 4244 | isSmDown: false 4245 | 4246 | isSmUp: true 4247 | 4248 | isMd: false 4249 | 4250 | isMdDown: false 4251 | 4252 | isMdUp: true 4253 | 4254 | isLg: false 4255 | 4256 | isLgDown: false 4257 | 4258 | isLgUp: true 4259 | 4260 | isXl: true 4261 | 4262 | isXlDown: true 4263 | 4264 | isXlUp: true 4265 | 4266 | (min-width:768px) and (max-width:992px),(max-width:576px): false 4267 | 4268 | wrong breakpoint: false 4269 | 4270 | wrong media query: false 4271 | 4272 | useBreakpoint() with heights 4273 | 4274 | isThin: false 4275 | 4276 | isThinDown: false 4277 | 4278 | isThinUp: true 4279 | 4280 | isNormal: false 4281 | 4282 | isNormalDown: false 4283 | 4284 | isNormalUp: true 4285 | 4286 | isBig: true 4287 | 4288 | isBigDown: true 4289 | 4290 | isBigUp: true 4291 | 4292 | 4293 | 4294 | Only visible for extra large devices (large desktops) 4295 | 4296 | Only visible for small AND extra large devices 4297 | 4298 | Only visible for small and more ([576px, Infinity[) 4299 | 4300 | Custom component 4301 | 4302 | xl 4303 | 4304 | Only visible for extra large devices (large desktops) 4305 | 4306 | sm xl 4307 | 4308 | Only visible for small AND extra large devices 4309 | 4310 | useBreakpoint() 4311 | 4312 | isXs: false 4313 | 4314 | isXsDown: false 4315 | 4316 | isXsUp: true 4317 | 4318 | isSm: false 4319 | 4320 | isSmDown: false 4321 | 4322 | isSmUp: true 4323 | 4324 | isMd: false 4325 | 4326 | isMdDown: false 4327 | 4328 | isMdUp: true 4329 | 4330 | isLg: false 4331 | 4332 | isLgDown: false 4333 | 4334 | isLgUp: true 4335 | 4336 | isXl: true 4337 | 4338 | isXlDown: true 4339 | 4340 | isXlUp: true 4341 | 4342 | (min-width:768px) and (max-width:992px),(max-width:576px): false 4343 | 4344 | wrong breakpoint: false 4345 | 4346 | wrong media query: false 4347 | 4348 | useBreakpoint() with heights 4349 | 4350 | isThin: false 4351 | 4352 | isThinDown: false 4353 | 4354 | isThinUp: true 4355 | 4356 | isNormal: false 4357 | 4358 | isNormalDown: false 4359 | 4360 | isNormalUp: true 4361 | 4362 | isBig: true 4363 | 4364 | isBigDown: true 4365 | 4366 | isBigUp: true 4367 | 4368 | 4369 | 4370 | Only visible for extra large devices (large desktops) 4371 | 4372 | Only visible for small AND extra large devices 4373 | 4374 | Only visible for small and more ([576px, Infinity[) 4375 | 4376 | Custom component 4377 | 4378 | xl 4379 | 4380 | Only visible for extra large devices (large desktops) 4381 | 4382 | sm xl 4383 | 4384 | Only visible for small AND extra large devices 4385 | 4386 | useBreakpoint() 4387 | 4388 | isXs: false 4389 | 4390 | isXsDown: false 4391 | 4392 | isXsUp: true 4393 | 4394 | isSm: false 4395 | 4396 | isSmDown: false 4397 | 4398 | isSmUp: true 4399 | 4400 | isMd: false 4401 | 4402 | isMdDown: false 4403 | 4404 | isMdUp: true 4405 | 4406 | isLg: false 4407 | 4408 | isLgDown: false 4409 | 4410 | isLgUp: true 4411 | 4412 | isXl: true 4413 | 4414 | isXlDown: true 4415 | 4416 | isXlUp: true 4417 | 4418 | (min-width:768px) and (max-width:992px),(max-width:576px): false 4419 | 4420 | wrong breakpoint: false 4421 | 4422 | wrong media query: false 4423 | 4424 | useBreakpoint() with heights 4425 | 4426 | isThin: false 4427 | 4428 | isThinDown: false 4429 | 4430 | isThinUp: true 4431 | 4432 | isNormal: false 4433 | 4434 | isNormalDown: false 4435 | 4436 | isNormalUp: true 4437 | 4438 | isBig: true 4439 | 4440 | isBigDown: true 4441 | 4442 | isBigUp: true 4443 | 4444 | 4445 | 4446 | Only visible for extra large devices (large desktops) 4447 | 4448 | Only visible for small AND extra large devices 4449 | 4450 | Only visible for small and more ([576px, Infinity[) 4451 | 4452 | Custom component 4453 | 4454 | xl 4455 | 4456 | Only visible for extra large devices (large desktops) 4457 | 4458 | sm xl 4459 | 4460 | Only visible for small AND extra large devices 4461 | 4462 | useBreakpoint() 4463 | 4464 | isXs: false 4465 | 4466 | isXsDown: false 4467 | 4468 | isXsUp: true 4469 | 4470 | isSm: false 4471 | 4472 | isSmDown: false 4473 | 4474 | isSmUp: true 4475 | 4476 | isMd: false 4477 | 4478 | isMdDown: false 4479 | 4480 | isMdUp: true 4481 | 4482 | isLg: false 4483 | 4484 | isLgDown: false 4485 | 4486 | isLgUp: true 4487 | 4488 | isXl: true 4489 | 4490 | isXlDown: true 4491 | 4492 | isXlUp: true 4493 | 4494 | (min-width:768px) and (max-width:992px),(max-width:576px): false 4495 | 4496 | wrong breakpoint: false 4497 | 4498 | wrong media query: false 4499 | 4500 | useBreakpoint() with heights 4501 | 4502 | isThin: false 4503 | 4504 | isThinDown: false 4505 | 4506 | isThinUp: true 4507 | 4508 | isNormal: false 4509 | 4510 | isNormalDown: false 4511 | 4512 | isNormalUp: true 4513 | 4514 | isBig: true 4515 | 4516 | isBigDown: true 4517 | 4518 | isBigUp: true 4519 | 4520 | " 4521 | `; 4522 | 4523 | exports[`Should render in SSR {"height": 1100, "width": 1300} 1`] = ` 4524 | " 4525 | 4526 | Only visible for extra small devices (portrait phones) 4527 | 4528 | Only visible for large or less ([0, 1200px]) 4529 | 4530 | Custom component 4531 | 4532 | xs 4533 | 4534 | Only visible for extra small devices (portrait phones) 4535 | 4536 | useBreakpoint() 4537 | 4538 | isXs: true 4539 | 4540 | isXsDown: true 4541 | 4542 | isXsUp: true 4543 | 4544 | isSm: false 4545 | 4546 | isSmDown: true 4547 | 4548 | isSmUp: false 4549 | 4550 | isMd: false 4551 | 4552 | isMdDown: true 4553 | 4554 | isMdUp: false 4555 | 4556 | isLg: false 4557 | 4558 | isLgDown: true 4559 | 4560 | isLgUp: false 4561 | 4562 | isXl: false 4563 | 4564 | isXlDown: true 4565 | 4566 | isXlUp: false 4567 | 4568 | (min-width:768px) and (max-width:992px),(max-width:576px): true 4569 | 4570 | wrong breakpoint: false 4571 | 4572 | wrong media query: false 4573 | 4574 | useBreakpoint() with heights 4575 | 4576 | isThin: true 4577 | 4578 | isThinDown: true 4579 | 4580 | isThinUp: true 4581 | 4582 | isNormal: false 4583 | 4584 | isNormalDown: true 4585 | 4586 | isNormalUp: false 4587 | 4588 | isBig: false 4589 | 4590 | isBigDown: true 4591 | 4592 | isBigUp: false 4593 | 4594 | " 4595 | `; 4596 | 4597 | exports[`Should render in SSR {"height": 1100, "width": 1300} 2`] = ` 4598 | " 4599 | 4600 | Only visible for small devices (landscape phones) 4601 | 4602 | Only visible for small AND extra large devices 4603 | 4604 | Only visible for small and more ([576px, Infinity[) 4605 | 4606 | Only visible for large or less ([0, 1200px]) 4607 | 4608 | Custom component 4609 | 4610 | sm 4611 | 4612 | Only visible for small devices (landscape phones) 4613 | 4614 | sm xl 4615 | 4616 | Only visible for small AND extra large devices 4617 | 4618 | useBreakpoint() 4619 | 4620 | isXs: false 4621 | 4622 | isXsDown: false 4623 | 4624 | isXsUp: true 4625 | 4626 | isSm: true 4627 | 4628 | isSmDown: true 4629 | 4630 | isSmUp: true 4631 | 4632 | isMd: false 4633 | 4634 | isMdDown: true 4635 | 4636 | isMdUp: false 4637 | 4638 | isLg: false 4639 | 4640 | isLgDown: true 4641 | 4642 | isLgUp: false 4643 | 4644 | isXl: false 4645 | 4646 | isXlDown: true 4647 | 4648 | isXlUp: false 4649 | 4650 | (min-width:768px) and (max-width:992px),(max-width:576px): false 4651 | 4652 | wrong breakpoint: false 4653 | 4654 | wrong media query: false 4655 | 4656 | useBreakpoint() with heights 4657 | 4658 | isThin: false 4659 | 4660 | isThinDown: false 4661 | 4662 | isThinUp: true 4663 | 4664 | isNormal: true 4665 | 4666 | isNormalDown: true 4667 | 4668 | isNormalUp: true 4669 | 4670 | isBig: false 4671 | 4672 | isBigDown: true 4673 | 4674 | isBigUp: false 4675 | 4676 | 4677 | 4678 | Only visible for small devices (landscape phones) 4679 | 4680 | Only visible for small AND extra large devices 4681 | 4682 | Only visible for small and more ([576px, Infinity[) 4683 | 4684 | Only visible for large or less ([0, 1200px]) 4685 | 4686 | Custom component 4687 | 4688 | sm 4689 | 4690 | Only visible for small devices (landscape phones) 4691 | 4692 | sm xl 4693 | 4694 | Only visible for small AND extra large devices 4695 | 4696 | useBreakpoint() 4697 | 4698 | isXs: false 4699 | 4700 | isXsDown: false 4701 | 4702 | isXsUp: true 4703 | 4704 | isSm: true 4705 | 4706 | isSmDown: true 4707 | 4708 | isSmUp: true 4709 | 4710 | isMd: false 4711 | 4712 | isMdDown: true 4713 | 4714 | isMdUp: false 4715 | 4716 | isLg: false 4717 | 4718 | isLgDown: true 4719 | 4720 | isLgUp: false 4721 | 4722 | isXl: false 4723 | 4724 | isXlDown: true 4725 | 4726 | isXlUp: false 4727 | 4728 | (min-width:768px) and (max-width:992px),(max-width:576px): false 4729 | 4730 | wrong breakpoint: false 4731 | 4732 | wrong media query: false 4733 | 4734 | useBreakpoint() with heights 4735 | 4736 | isThin: false 4737 | 4738 | isThinDown: false 4739 | 4740 | isThinUp: true 4741 | 4742 | isNormal: true 4743 | 4744 | isNormalDown: true 4745 | 4746 | isNormalUp: true 4747 | 4748 | isBig: false 4749 | 4750 | isBigDown: true 4751 | 4752 | isBigUp: false 4753 | 4754 | " 4755 | `; 4756 | 4757 | exports[`Should render in SSR {"height": 1100, "width": 1300} 3`] = ` 4758 | " 4759 | 4760 | Only visible for medium devices (tablets) 4761 | 4762 | Only visible for small and more ([576px, Infinity[) 4763 | 4764 | Only visible for large or less ([0, 1200px]) 4765 | 4766 | Custom component 4767 | 4768 | md 4769 | 4770 | Only visible for medium devices (tablets) 4771 | 4772 | useBreakpoint() 4773 | 4774 | isXs: false 4775 | 4776 | isXsDown: false 4777 | 4778 | isXsUp: true 4779 | 4780 | isSm: false 4781 | 4782 | isSmDown: false 4783 | 4784 | isSmUp: true 4785 | 4786 | isMd: true 4787 | 4788 | isMdDown: true 4789 | 4790 | isMdUp: true 4791 | 4792 | isLg: false 4793 | 4794 | isLgDown: true 4795 | 4796 | isLgUp: false 4797 | 4798 | isXl: false 4799 | 4800 | isXlDown: true 4801 | 4802 | isXlUp: false 4803 | 4804 | (min-width:768px) and (max-width:992px),(max-width:576px): true 4805 | 4806 | wrong breakpoint: false 4807 | 4808 | wrong media query: false 4809 | 4810 | useBreakpoint() with heights 4811 | 4812 | isThin: false 4813 | 4814 | isThinDown: false 4815 | 4816 | isThinUp: true 4817 | 4818 | isNormal: true 4819 | 4820 | isNormalDown: true 4821 | 4822 | isNormalUp: true 4823 | 4824 | isBig: false 4825 | 4826 | isBigDown: true 4827 | 4828 | isBigUp: false 4829 | 4830 | 4831 | 4832 | Only visible for medium devices (tablets) 4833 | 4834 | Only visible for small and more ([576px, Infinity[) 4835 | 4836 | Only visible for large or less ([0, 1200px]) 4837 | 4838 | Custom component 4839 | 4840 | md 4841 | 4842 | Only visible for medium devices (tablets) 4843 | 4844 | useBreakpoint() 4845 | 4846 | isXs: false 4847 | 4848 | isXsDown: false 4849 | 4850 | isXsUp: true 4851 | 4852 | isSm: false 4853 | 4854 | isSmDown: false 4855 | 4856 | isSmUp: true 4857 | 4858 | isMd: true 4859 | 4860 | isMdDown: true 4861 | 4862 | isMdUp: true 4863 | 4864 | isLg: false 4865 | 4866 | isLgDown: true 4867 | 4868 | isLgUp: false 4869 | 4870 | isXl: false 4871 | 4872 | isXlDown: true 4873 | 4874 | isXlUp: false 4875 | 4876 | (min-width:768px) and (max-width:992px),(max-width:576px): true 4877 | 4878 | wrong breakpoint: false 4879 | 4880 | wrong media query: false 4881 | 4882 | useBreakpoint() with heights 4883 | 4884 | isThin: false 4885 | 4886 | isThinDown: false 4887 | 4888 | isThinUp: true 4889 | 4890 | isNormal: true 4891 | 4892 | isNormalDown: true 4893 | 4894 | isNormalUp: true 4895 | 4896 | isBig: false 4897 | 4898 | isBigDown: true 4899 | 4900 | isBigUp: false 4901 | 4902 | 4903 | 4904 | Only visible for medium devices (tablets) 4905 | 4906 | Only visible for small and more ([576px, Infinity[) 4907 | 4908 | Only visible for large or less ([0, 1200px]) 4909 | 4910 | Custom component 4911 | 4912 | md 4913 | 4914 | Only visible for medium devices (tablets) 4915 | 4916 | useBreakpoint() 4917 | 4918 | isXs: false 4919 | 4920 | isXsDown: false 4921 | 4922 | isXsUp: true 4923 | 4924 | isSm: false 4925 | 4926 | isSmDown: false 4927 | 4928 | isSmUp: true 4929 | 4930 | isMd: true 4931 | 4932 | isMdDown: true 4933 | 4934 | isMdUp: true 4935 | 4936 | isLg: false 4937 | 4938 | isLgDown: true 4939 | 4940 | isLgUp: false 4941 | 4942 | isXl: false 4943 | 4944 | isXlDown: true 4945 | 4946 | isXlUp: false 4947 | 4948 | (min-width:768px) and (max-width:992px),(max-width:576px): true 4949 | 4950 | wrong breakpoint: false 4951 | 4952 | wrong media query: false 4953 | 4954 | useBreakpoint() with heights 4955 | 4956 | isThin: false 4957 | 4958 | isThinDown: false 4959 | 4960 | isThinUp: true 4961 | 4962 | isNormal: true 4963 | 4964 | isNormalDown: true 4965 | 4966 | isNormalUp: true 4967 | 4968 | isBig: false 4969 | 4970 | isBigDown: true 4971 | 4972 | isBigUp: false 4973 | 4974 | " 4975 | `; 4976 | 4977 | exports[`Should render in SSR {"height": 1100, "width": 1300} 4`] = ` 4978 | " 4979 | 4980 | Only visible for large devices (desktops) 4981 | 4982 | Only visible for small and more ([576px, Infinity[) 4983 | 4984 | Only visible for large or less ([0, 1200px]) 4985 | 4986 | Custom component 4987 | 4988 | lg 4989 | 4990 | Only visible for large devices (desktops) 4991 | 4992 | useBreakpoint() 4993 | 4994 | isXs: false 4995 | 4996 | isXsDown: false 4997 | 4998 | isXsUp: true 4999 | 5000 | isSm: false 5001 | 5002 | isSmDown: false 5003 | 5004 | isSmUp: true 5005 | 5006 | isMd: false 5007 | 5008 | isMdDown: false 5009 | 5010 | isMdUp: true 5011 | 5012 | isLg: true 5013 | 5014 | isLgDown: true 5015 | 5016 | isLgUp: true 5017 | 5018 | isXl: false 5019 | 5020 | isXlDown: true 5021 | 5022 | isXlUp: false 5023 | 5024 | (min-width:768px) and (max-width:992px),(max-width:576px): false 5025 | 5026 | wrong breakpoint: false 5027 | 5028 | wrong media query: false 5029 | 5030 | useBreakpoint() with heights 5031 | 5032 | isThin: false 5033 | 5034 | isThinDown: false 5035 | 5036 | isThinUp: true 5037 | 5038 | isNormal: true 5039 | 5040 | isNormalDown: true 5041 | 5042 | isNormalUp: true 5043 | 5044 | isBig: false 5045 | 5046 | isBigDown: true 5047 | 5048 | isBigUp: false 5049 | 5050 | 5051 | 5052 | Only visible for large devices (desktops) 5053 | 5054 | Only visible for small and more ([576px, Infinity[) 5055 | 5056 | Only visible for large or less ([0, 1200px]) 5057 | 5058 | Custom component 5059 | 5060 | lg 5061 | 5062 | Only visible for large devices (desktops) 5063 | 5064 | useBreakpoint() 5065 | 5066 | isXs: false 5067 | 5068 | isXsDown: false 5069 | 5070 | isXsUp: true 5071 | 5072 | isSm: false 5073 | 5074 | isSmDown: false 5075 | 5076 | isSmUp: true 5077 | 5078 | isMd: false 5079 | 5080 | isMdDown: false 5081 | 5082 | isMdUp: true 5083 | 5084 | isLg: true 5085 | 5086 | isLgDown: true 5087 | 5088 | isLgUp: true 5089 | 5090 | isXl: false 5091 | 5092 | isXlDown: true 5093 | 5094 | isXlUp: false 5095 | 5096 | (min-width:768px) and (max-width:992px),(max-width:576px): false 5097 | 5098 | wrong breakpoint: false 5099 | 5100 | wrong media query: false 5101 | 5102 | useBreakpoint() with heights 5103 | 5104 | isThin: false 5105 | 5106 | isThinDown: false 5107 | 5108 | isThinUp: true 5109 | 5110 | isNormal: true 5111 | 5112 | isNormalDown: true 5113 | 5114 | isNormalUp: true 5115 | 5116 | isBig: false 5117 | 5118 | isBigDown: true 5119 | 5120 | isBigUp: false 5121 | 5122 | 5123 | 5124 | Only visible for large devices (desktops) 5125 | 5126 | Only visible for small and more ([576px, Infinity[) 5127 | 5128 | Only visible for large or less ([0, 1200px]) 5129 | 5130 | Custom component 5131 | 5132 | lg 5133 | 5134 | Only visible for large devices (desktops) 5135 | 5136 | useBreakpoint() 5137 | 5138 | isXs: false 5139 | 5140 | isXsDown: false 5141 | 5142 | isXsUp: true 5143 | 5144 | isSm: false 5145 | 5146 | isSmDown: false 5147 | 5148 | isSmUp: true 5149 | 5150 | isMd: false 5151 | 5152 | isMdDown: false 5153 | 5154 | isMdUp: true 5155 | 5156 | isLg: true 5157 | 5158 | isLgDown: true 5159 | 5160 | isLgUp: true 5161 | 5162 | isXl: false 5163 | 5164 | isXlDown: true 5165 | 5166 | isXlUp: false 5167 | 5168 | (min-width:768px) and (max-width:992px),(max-width:576px): false 5169 | 5170 | wrong breakpoint: false 5171 | 5172 | wrong media query: false 5173 | 5174 | useBreakpoint() with heights 5175 | 5176 | isThin: false 5177 | 5178 | isThinDown: false 5179 | 5180 | isThinUp: true 5181 | 5182 | isNormal: true 5183 | 5184 | isNormalDown: true 5185 | 5186 | isNormalUp: true 5187 | 5188 | isBig: false 5189 | 5190 | isBigDown: true 5191 | 5192 | isBigUp: false 5193 | 5194 | 5195 | 5196 | Only visible for large devices (desktops) 5197 | 5198 | Only visible for small and more ([576px, Infinity[) 5199 | 5200 | Only visible for large or less ([0, 1200px]) 5201 | 5202 | Custom component 5203 | 5204 | lg 5205 | 5206 | Only visible for large devices (desktops) 5207 | 5208 | useBreakpoint() 5209 | 5210 | isXs: false 5211 | 5212 | isXsDown: false 5213 | 5214 | isXsUp: true 5215 | 5216 | isSm: false 5217 | 5218 | isSmDown: false 5219 | 5220 | isSmUp: true 5221 | 5222 | isMd: false 5223 | 5224 | isMdDown: false 5225 | 5226 | isMdUp: true 5227 | 5228 | isLg: true 5229 | 5230 | isLgDown: true 5231 | 5232 | isLgUp: true 5233 | 5234 | isXl: false 5235 | 5236 | isXlDown: true 5237 | 5238 | isXlUp: false 5239 | 5240 | (min-width:768px) and (max-width:992px),(max-width:576px): false 5241 | 5242 | wrong breakpoint: false 5243 | 5244 | wrong media query: false 5245 | 5246 | useBreakpoint() with heights 5247 | 5248 | isThin: false 5249 | 5250 | isThinDown: false 5251 | 5252 | isThinUp: true 5253 | 5254 | isNormal: true 5255 | 5256 | isNormalDown: true 5257 | 5258 | isNormalUp: true 5259 | 5260 | isBig: false 5261 | 5262 | isBigDown: true 5263 | 5264 | isBigUp: false 5265 | 5266 | " 5267 | `; 5268 | 5269 | exports[`Should render in SSR {"height": 1100, "width": 1300} 5`] = ` 5270 | " 5271 | 5272 | Only visible for extra large devices (large desktops) 5273 | 5274 | Only visible for small AND extra large devices 5275 | 5276 | Only visible for small and more ([576px, Infinity[) 5277 | 5278 | Custom component 5279 | 5280 | xl 5281 | 5282 | Only visible for extra large devices (large desktops) 5283 | 5284 | sm xl 5285 | 5286 | Only visible for small AND extra large devices 5287 | 5288 | useBreakpoint() 5289 | 5290 | isXs: false 5291 | 5292 | isXsDown: false 5293 | 5294 | isXsUp: true 5295 | 5296 | isSm: false 5297 | 5298 | isSmDown: false 5299 | 5300 | isSmUp: true 5301 | 5302 | isMd: false 5303 | 5304 | isMdDown: false 5305 | 5306 | isMdUp: true 5307 | 5308 | isLg: false 5309 | 5310 | isLgDown: false 5311 | 5312 | isLgUp: true 5313 | 5314 | isXl: true 5315 | 5316 | isXlDown: true 5317 | 5318 | isXlUp: true 5319 | 5320 | (min-width:768px) and (max-width:992px),(max-width:576px): false 5321 | 5322 | wrong breakpoint: false 5323 | 5324 | wrong media query: false 5325 | 5326 | useBreakpoint() with heights 5327 | 5328 | isThin: false 5329 | 5330 | isThinDown: false 5331 | 5332 | isThinUp: true 5333 | 5334 | isNormal: false 5335 | 5336 | isNormalDown: false 5337 | 5338 | isNormalUp: true 5339 | 5340 | isBig: true 5341 | 5342 | isBigDown: true 5343 | 5344 | isBigUp: true 5345 | 5346 | 5347 | 5348 | Only visible for extra large devices (large desktops) 5349 | 5350 | Only visible for small AND extra large devices 5351 | 5352 | Only visible for small and more ([576px, Infinity[) 5353 | 5354 | Custom component 5355 | 5356 | xl 5357 | 5358 | Only visible for extra large devices (large desktops) 5359 | 5360 | sm xl 5361 | 5362 | Only visible for small AND extra large devices 5363 | 5364 | useBreakpoint() 5365 | 5366 | isXs: false 5367 | 5368 | isXsDown: false 5369 | 5370 | isXsUp: true 5371 | 5372 | isSm: false 5373 | 5374 | isSmDown: false 5375 | 5376 | isSmUp: true 5377 | 5378 | isMd: false 5379 | 5380 | isMdDown: false 5381 | 5382 | isMdUp: true 5383 | 5384 | isLg: false 5385 | 5386 | isLgDown: false 5387 | 5388 | isLgUp: true 5389 | 5390 | isXl: true 5391 | 5392 | isXlDown: true 5393 | 5394 | isXlUp: true 5395 | 5396 | (min-width:768px) and (max-width:992px),(max-width:576px): false 5397 | 5398 | wrong breakpoint: false 5399 | 5400 | wrong media query: false 5401 | 5402 | useBreakpoint() with heights 5403 | 5404 | isThin: false 5405 | 5406 | isThinDown: false 5407 | 5408 | isThinUp: true 5409 | 5410 | isNormal: false 5411 | 5412 | isNormalDown: false 5413 | 5414 | isNormalUp: true 5415 | 5416 | isBig: true 5417 | 5418 | isBigDown: true 5419 | 5420 | isBigUp: true 5421 | 5422 | 5423 | 5424 | Only visible for extra large devices (large desktops) 5425 | 5426 | Only visible for small AND extra large devices 5427 | 5428 | Only visible for small and more ([576px, Infinity[) 5429 | 5430 | Custom component 5431 | 5432 | xl 5433 | 5434 | Only visible for extra large devices (large desktops) 5435 | 5436 | sm xl 5437 | 5438 | Only visible for small AND extra large devices 5439 | 5440 | useBreakpoint() 5441 | 5442 | isXs: false 5443 | 5444 | isXsDown: false 5445 | 5446 | isXsUp: true 5447 | 5448 | isSm: false 5449 | 5450 | isSmDown: false 5451 | 5452 | isSmUp: true 5453 | 5454 | isMd: false 5455 | 5456 | isMdDown: false 5457 | 5458 | isMdUp: true 5459 | 5460 | isLg: false 5461 | 5462 | isLgDown: false 5463 | 5464 | isLgUp: true 5465 | 5466 | isXl: true 5467 | 5468 | isXlDown: true 5469 | 5470 | isXlUp: true 5471 | 5472 | (min-width:768px) and (max-width:992px),(max-width:576px): false 5473 | 5474 | wrong breakpoint: false 5475 | 5476 | wrong media query: false 5477 | 5478 | useBreakpoint() with heights 5479 | 5480 | isThin: false 5481 | 5482 | isThinDown: false 5483 | 5484 | isThinUp: true 5485 | 5486 | isNormal: false 5487 | 5488 | isNormalDown: false 5489 | 5490 | isNormalUp: true 5491 | 5492 | isBig: true 5493 | 5494 | isBigDown: true 5495 | 5496 | isBigUp: true 5497 | 5498 | 5499 | 5500 | Only visible for extra large devices (large desktops) 5501 | 5502 | Only visible for small AND extra large devices 5503 | 5504 | Only visible for small and more ([576px, Infinity[) 5505 | 5506 | Custom component 5507 | 5508 | xl 5509 | 5510 | Only visible for extra large devices (large desktops) 5511 | 5512 | sm xl 5513 | 5514 | Only visible for small AND extra large devices 5515 | 5516 | useBreakpoint() 5517 | 5518 | isXs: false 5519 | 5520 | isXsDown: false 5521 | 5522 | isXsUp: true 5523 | 5524 | isSm: false 5525 | 5526 | isSmDown: false 5527 | 5528 | isSmUp: true 5529 | 5530 | isMd: false 5531 | 5532 | isMdDown: false 5533 | 5534 | isMdUp: true 5535 | 5536 | isLg: false 5537 | 5538 | isLgDown: false 5539 | 5540 | isLgUp: true 5541 | 5542 | isXl: true 5543 | 5544 | isXlDown: true 5545 | 5546 | isXlUp: true 5547 | 5548 | (min-width:768px) and (max-width:992px),(max-width:576px): false 5549 | 5550 | wrong breakpoint: false 5551 | 5552 | wrong media query: false 5553 | 5554 | useBreakpoint() with heights 5555 | 5556 | isThin: false 5557 | 5558 | isThinDown: false 5559 | 5560 | isThinUp: true 5561 | 5562 | isNormal: false 5563 | 5564 | isNormalDown: false 5565 | 5566 | isNormalUp: true 5567 | 5568 | isBig: true 5569 | 5570 | isBigDown: true 5571 | 5572 | isBigUp: true 5573 | 5574 | 5575 | 5576 | Only visible for extra large devices (large desktops) 5577 | 5578 | Only visible for small AND extra large devices 5579 | 5580 | Only visible for small and more ([576px, Infinity[) 5581 | 5582 | Custom component 5583 | 5584 | xl 5585 | 5586 | Only visible for extra large devices (large desktops) 5587 | 5588 | sm xl 5589 | 5590 | Only visible for small AND extra large devices 5591 | 5592 | useBreakpoint() 5593 | 5594 | isXs: false 5595 | 5596 | isXsDown: false 5597 | 5598 | isXsUp: true 5599 | 5600 | isSm: false 5601 | 5602 | isSmDown: false 5603 | 5604 | isSmUp: true 5605 | 5606 | isMd: false 5607 | 5608 | isMdDown: false 5609 | 5610 | isMdUp: true 5611 | 5612 | isLg: false 5613 | 5614 | isLgDown: false 5615 | 5616 | isLgUp: true 5617 | 5618 | isXl: true 5619 | 5620 | isXlDown: true 5621 | 5622 | isXlUp: true 5623 | 5624 | (min-width:768px) and (max-width:992px),(max-width:576px): false 5625 | 5626 | wrong breakpoint: false 5627 | 5628 | wrong media query: false 5629 | 5630 | useBreakpoint() with heights 5631 | 5632 | isThin: false 5633 | 5634 | isThinDown: false 5635 | 5636 | isThinUp: true 5637 | 5638 | isNormal: false 5639 | 5640 | isNormalDown: false 5641 | 5642 | isNormalUp: true 5643 | 5644 | isBig: true 5645 | 5646 | isBigDown: true 5647 | 5648 | isBigUp: true 5649 | 5650 | " 5651 | `; 5652 | -------------------------------------------------------------------------------- /packages/tests/src/__tests__/browser.ts: -------------------------------------------------------------------------------- 1 | import "../App"; 2 | 3 | import { sizes } from "./sizes.util"; 4 | 5 | const sleep = (ms: number) => 6 | new Promise((res) => setTimeout(res, ms)); 7 | 8 | const getText = async () => { 9 | await sleep(100); // ensure that the hooks have time to update 10 | return ( 11 | (await page.$eval("body", (el) => 12 | (el as HTMLElement).innerText 13 | .replace(/\n/g, "\n\n") 14 | .replace(/\n\n+/g, "\n\n"), 15 | )) || "" 16 | ); 17 | }; 18 | 19 | it("browser test", async () => { 20 | await page.goto("http://localhost:3000"); 21 | 22 | for (const size of sizes) { 23 | await page.setViewport(size); 24 | expect(await getText()).toMatchSnapshot(); 25 | } 26 | }); 27 | -------------------------------------------------------------------------------- /packages/tests/src/__tests__/esm.mjs: -------------------------------------------------------------------------------- 1 | /* eslint-disable @typescript-eslint/no-unused-vars */ 2 | import * as ReactResponsive from "@blocz/react-responsive"; 3 | import packageJSON from "@blocz/react-responsive/package.json" with { type: "json" }; 4 | 5 | console.log("Didn’t crash"); 6 | -------------------------------------------------------------------------------- /packages/tests/src/__tests__/resolver.ts: -------------------------------------------------------------------------------- 1 | import { execSync } from "child_process"; 2 | import * as path from "path"; 3 | import { existsSync } from "fs"; 4 | 5 | describe("Important files should be resolvable", () => { 6 | it("should work in a CJS context", () => { 7 | expect( 8 | require.resolve("@blocz/react-responsive"), 9 | ).not.toBeNull(); 10 | expect( 11 | require.resolve( 12 | "@blocz/react-responsive/package.json", 13 | ), 14 | ).not.toBeNull(); 15 | }); 16 | 17 | it("should work in a ESM context", () => { 18 | expect( 19 | execSync("node ./esm.mjs", { 20 | cwd: __dirname, 21 | encoding: "utf-8", 22 | }), 23 | ).toBe("Didn’t crash\n"); 24 | }); 25 | }); 26 | 27 | describe("built files", () => { 28 | it("should contain all necessary files", () => { 29 | const BRRPath = path.dirname( 30 | require.resolve( 31 | "@blocz/react-responsive/package.json", 32 | ), 33 | ); 34 | 35 | expect( 36 | existsSync( 37 | path.join(BRRPath, "lib/react-responsive.js"), 38 | ), 39 | ).toBe(true); 40 | expect( 41 | existsSync( 42 | path.join( 43 | BRRPath, 44 | "lib/react-responsive.modern.js", 45 | ), 46 | ), 47 | ).toBe(true); 48 | expect( 49 | existsSync( 50 | path.join( 51 | BRRPath, 52 | "lib/react-responsive.modern.mjs", 53 | ), 54 | ), 55 | ).toBe(true); 56 | expect( 57 | existsSync( 58 | path.join(BRRPath, "lib/react-responsive.umd.js"), 59 | ), 60 | ).toBe(true); 61 | }); 62 | }); 63 | -------------------------------------------------------------------------------- /packages/tests/src/__tests__/sizes.util.ts: -------------------------------------------------------------------------------- 1 | export const sizes = [ 2 | // on extra small device 3 | { 4 | width: 500, 5 | height: 300, 6 | }, 7 | 8 | // on small device 9 | { 10 | width: 750, 11 | height: 550, 12 | }, 13 | 14 | // on medium device 15 | { 16 | width: 900, 17 | height: 700, 18 | }, 19 | 20 | // on large device 21 | { 22 | width: 1000, 23 | height: 800, 24 | }, 25 | 26 | // on extra large device 27 | { 28 | width: 1300, 29 | height: 1100, 30 | }, 31 | ]; 32 | -------------------------------------------------------------------------------- /packages/tests/src/__tests__/ssr.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * @jest-environment jsdom 3 | */ 4 | 5 | import { render } from "@testing-library/react"; 6 | 7 | import "mock-match-media/polyfill"; 8 | 9 | import { setMedia } from "mock-match-media"; 10 | import { sizes } from "./sizes.util"; 11 | 12 | import App from "../App"; 13 | 14 | const inline = new Set(["", ""]); 15 | 16 | const prettify = (input: string) => 17 | input 18 | .replace(/<[^/>]*>/g, ``) // opening tag 19 | .replace(/<\/[^>]*>/g, (match) => 20 | inline.has(match) ? ` ` : `\n\n`, 21 | ) // closing tag 22 | .replace(/\n\n+/g, "\n\n") 23 | .replace(/ +/g, " ") 24 | .replace(/</g, "<") 25 | .replace(/>/g, ">"); 26 | 27 | const wait = (ms: number) => 28 | new Promise((res) => setTimeout(res, ms)); 29 | 30 | it.each(sizes)("Should render in SSR %p", async () => { 31 | for (const size of sizes) { 32 | setMedia({ 33 | width: `${size.width}px`, 34 | height: `${size.height}px`, 35 | }); 36 | 37 | await wait(20); 38 | 39 | expect( 40 | prettify(render(App).baseElement.outerHTML), 41 | ).toMatchSnapshot(); 42 | 43 | await wait(20); 44 | } 45 | }); 46 | -------------------------------------------------------------------------------- /packages/tests/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /packages/tests/src/index.ts: -------------------------------------------------------------------------------- 1 | import { createRoot } from "react-dom/client"; 2 | 3 | import App from "./App"; 4 | 5 | createRoot(document.getElementById("root")!).render(App); 6 | -------------------------------------------------------------------------------- /packages/tests/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "esModuleInterop": true, 8 | "allowSyntheticDefaultImports": true, 9 | "strict": true, 10 | "forceConsistentCasingInFileNames": true, 11 | "module": "esnext", 12 | "moduleResolution": "node", 13 | "resolveJsonModule": true, 14 | "isolatedModules": true, 15 | "noEmit": true, 16 | "jsx": "react-jsx", 17 | "noFallthroughCasesInSwitch": true 18 | } 19 | } 20 | --------------------------------------------------------------------------------