{"_id":"@7iomka/media","_rev":"5-9a41ba5e6a1a3814101a87a46c198f79","name":"@7iomka/media","dist-tags":{"latest":"1.0.5"},"versions":{"1.0.0":{"name":"@7iomka/media","version":"1.0.0","description":"CSS-only wrappers for media query based containers","main":"dist/index.js","publishConfig":{"registry":"https://registry.npmjs.org/"},"engines":{"node":">=12.20.2","yarn":"1.x.x"},"typings":"dist/index.d.ts","scripts":{"clean":"rm -rf dist","compile":"babel src --out-dir dist -s --source-maps --extensions '.ts,.tsx' --ignore src/**/__test__","lint":"tslint -c tslint.json --project tsconfig.json","prepublishOnly":"yarn clean && yarn compile && yarn type-declarations","prettier":"prettier","prettier-project":"yarn prettier-write 'src/**/*.{ts,tsx}'","prettier-write":"yarn prettier --write","release":"auto shipit","test":"yarn type-check && yarn lint && yarn jest","type-check":"tsc --emitDeclarationOnly --pretty","type-declarations":"tsc --emitDeclarationOnly","watch":"concurrently --raw --kill-others 'yarn compile -w' 'tsc --emitDeclarationOnly -w'"},"repository":{"type":"git","url":"git+ssh://git@github.com/7iomka/media.git"},"authors":["Eloy Durán ","Znacovean Simion <7iomka@gmail.com>"],"license":"MIT","bugs":{"url":"https://github.com/7iomka/media/issues"},"homepage":"https://github.com/7iomka/media#readme","peerDependencies":{"react":">=16.3.0"},"devDependencies":{"@artsy/auto-config":"1.1.0","@artsy/detect-responsive-traits":"0.1.0","@babel/cli":"7.15.4","@babel/core":"7.0.0","@babel/node":"7.0.0","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.0.0","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.0.0","@types/chalk":"2.2.0","@types/express":"4.16.0","@types/jest":"23.3.1","@types/node":"10.9.4","@types/react":"17.0.0","@types/react-dom":"17.0.0","@types/react-test-renderer":"17.0.0","@types/webpack-dev-server":"3.1.1","babel-core":"7.0.0-bridge.0","babel-jest":"23.4.2","babel-loader":"8.0.4","babel-preset-env":"1.7.0","chalk":"2.4.1","concurrently":"3.6.1","express":"4.16.4","husky":"0.14.3","jest":"24.9.0","jest-styled-components":"6.2.2","lint-staged":"7.3.0","prettier":"1.17.1","react":"17.0.1","react-dom":"17.0.1","react-test-renderer":"17.0.1","static-extend":"0.1.2","styled-components":"3.4.5","tslint":"5.20.1","tslint-config-prettier":"1.15.0","tslint-react":"3.6.0","typescript":"4.7.4","typescript-styled-plugin":"0.18.1","webpack":"4.46.0","webpack-dev-server":"4.2.1"},"prettier":{"semi":false,"singleQuote":false,"trailingComma":"es5","bracketSpacing":true,"proseWrap":"always"},"jest":{"transform":{".(ts|tsx)":"babel-jest"},"testRegex":"(/__tests__/.*|\\.(test))\\.(ts|tsx)$","testPathIgnorePatterns":["/dist/"],"moduleFileExtensions":["ts","tsx","js"],"modulePathIgnorePatterns":["/dist/*"],"moduleDirectories":["node_modules","/src"]},"keywords":["react","responsive"],"gitHead":"5690b7dbb2beca228bd8be27212801ccda454a86","_id":"@7iomka/media@1.0.0","_nodeVersion":"16.15.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-b8X5tzryt8tMDmTRLllDLwTgf+cuK0Q6CJuXBQ+JBd/65FcygLdB4+2Z7ed1Lhjfm3Avt9jL0SWrur/AQMrGbQ==","shasum":"5bb19a7e6485f1b2bd0d072bced01ce6b76a426e","tarball":"https://registry.npmjs.org/@7iomka/media/-/media-1.0.0.tgz","fileCount":21,"unpackedSize":133569,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIAmBBOAhl47MNxu7IKeY+eci7V2qhX98FCF6IFbjKz+5AiBs0j+WPVhbeueZ9z4yHedalVLk7aS5B+gTxsVMyQcadg=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis1S6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpKAQ/9F0XhV4uzCXJdIm6f8kGBml/70GJoDuDxnb4n9CgWPTsWiDsL\r\nv/tTgMXNNTcqmEIkd4KPqT3vtD7ZS5E0UzHwdHaWCsYMU7Ngo+xmO0lp5692\r\nPaEKmRAoYVUmvO4z/PZECcz5tgTRFuBUkjeqKPenZ9lMk9/1ijSVugpM9voY\r\nTVc/FeLz4sBsNPDcpx8uxjmQSMDaZvYof9hdUmbjHugkirVdhpdtoLyTmXkW\r\nv4lINYLDD/mAmCIIwMKDy3i65hJpNyA5nG6//9da5ZoneMFXhcLZaeaSvKQ0\r\n6/vB633T0iNis25U21SrnFzRH6zUMFg95EYYNhk97KwRCZs3O2zcKI8rKndW\r\n4tafFhPQDlwUEtkhax5Z89BiKbIb2Cm31fo4b9FFxAk0YrCwtr2uU+07HokY\r\nifpVJ9hrILSiT/JRL8z1s5AqkA9mrEg7XRmHyAWjASgMNlG8m2sO0fFnc6nb\r\n/MAz9h03zwHFQL+PSVS0nRLgzwag1HgVuJBIvi/q2cG2kaYFXDmMe9xdiqpJ\r\nfopRL9a3ro9q5nFYj59+DXfYjhNIlpOavuuiBT6jIcnrrBNgo158qyp2M5vp\r\nVKw6zZ1ePoTYS0COF3LXfjCiY48n3jIxg8s2bXpmd7bX0bZXcMNeEAU4WE+k\r\n7yLj/QhTRBgr8kSmwmPCi9vl1c3GkBMlquo=\r\n=T6wI\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"7iomka","email":"7iomka@gmail.com"},"directories":{},"maintainers":[{"name":"7iomka","email":"7iomka@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/media_1.0.0_1655919802730_0.07626926445967652"},"_hasShrinkwrap":false},"1.0.1":{"name":"@7iomka/media","version":"1.0.1","description":"CSS-only wrappers for media query based containers","main":"dist/index.js","publishConfig":{"registry":"https://registry.npmjs.org/"},"engines":{"node":">=12.20.2","yarn":"1.x.x"},"typings":"dist/index.d.ts","scripts":{"clean":"rm -rf dist","compile":"babel src --out-dir dist -s --source-maps --extensions '.ts,.tsx' --ignore src/**/__test__","lint":"tslint -c tslint.json --project tsconfig.json","precommit":"lint-staged","prepush":"yarn run type-check","prepublishOnly":"yarn clean && yarn compile && yarn type-declarations","prettier":"prettier","prettier-project":"yarn prettier-write 'src/**/*.{ts,tsx}'","prettier-write":"yarn prettier --write","release":"auto shipit","test":"yarn type-check && yarn lint && yarn jest","type-check":"tsc --emitDeclarationOnly --pretty","type-declarations":"tsc --emitDeclarationOnly","watch":"concurrently --raw --kill-others 'yarn compile -w' 'tsc --emitDeclarationOnly -w'"},"repository":{"type":"git","url":"git+ssh://git@github.com/7iomka/media.git"},"authors":["Eloy Durán ","Znacovean Simion <7iomka@gmail.com>"],"license":"MIT","bugs":{"url":"https://github.com/7iomka/media/issues"},"homepage":"https://github.com/7iomka/media#readme","peerDependencies":{"react":">=16.3.0"},"devDependencies":{"@artsy/auto-config":"1.1.0","@artsy/detect-responsive-traits":"0.1.0","@babel/cli":"7.15.4","@babel/core":"7.0.0","@babel/node":"7.0.0","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.0.0","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.0.0","@types/chalk":"2.2.0","@types/express":"4.16.0","@types/jest":"23.3.1","@types/node":"10.9.4","@types/react":"17.0.0","@types/react-dom":"17.0.0","@types/react-test-renderer":"17.0.0","@types/webpack-dev-server":"3.1.1","babel-core":"7.0.0-bridge.0","babel-jest":"23.4.2","babel-loader":"8.0.4","babel-preset-env":"1.7.0","chalk":"2.4.1","concurrently":"3.6.1","express":"4.16.4","husky":"0.14.3","jest":"24.9.0","jest-styled-components":"6.2.2","lint-staged":"7.3.0","prettier":"1.17.1","react":"17.0.1","react-dom":"17.0.1","react-test-renderer":"17.0.1","static-extend":"0.1.2","styled-components":"3.4.5","tslint":"5.20.1","tslint-config-prettier":"1.15.0","tslint-react":"3.6.0","typescript":"4.7.4","typescript-styled-plugin":"0.18.1","webpack":"4.46.0","webpack-dev-server":"4.2.1"},"lint-staged":{"*.@(ts|tsx)":["tslint -c tslint.json --fix","yarn prettier-write --","git add"]},"prettier":{"semi":false,"singleQuote":false,"trailingComma":"es5","bracketSpacing":true,"proseWrap":"always"},"jest":{"transform":{".(ts|tsx)":"babel-jest"},"testRegex":"(/__tests__/.*|\\.(test))\\.(ts|tsx)$","testPathIgnorePatterns":["/dist/"],"moduleFileExtensions":["ts","tsx","js"],"modulePathIgnorePatterns":["/dist/*"],"moduleDirectories":["node_modules","/src"]},"keywords":["react","responsive"],"gitHead":"8bb60c24b3300fbbd807ce09380c32f34c940e49","_id":"@7iomka/media@1.0.1","_nodeVersion":"16.15.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-sa7UZCF2nTb6IzL2wTcSbSQQR4aJZ8xn5M8AaVcs7wXBHdMjfweQtodxierGwekK54ZURL1hAVk7shvNbZ1zlQ==","shasum":"4b63914ae2ac7da8a95e4f3202c47a583fc83db3","tarball":"https://registry.npmjs.org/@7iomka/media/-/media-1.0.1.tgz","fileCount":21,"unpackedSize":133749,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIEZpBM7euAVjipkLdy3D99ZMv2RV+sSJzh23NDCKTBsDAiAuiCKSyqWFqV23lM6JcIrjL5GO3mb6w+XPdSd5U9ktdA=="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis1eeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmobjQ//UTGlojQ2pv6ePtHD7sHAjVTjOU9AANmpvnf8E/tXlskjGgjt\r\n1GJu7T7gXo18aLD56v6uGoDtWp2Tl7rri59yLE/w6/UFUJ5ruBJJvdoIH2Vd\r\ntA2xpsbTICMB+FeC2dJ9tYKLmvC+mvFEZu3eVKj/0UMxYorDiX9smzlHQHfs\r\nZIBXwbpYQUayxIHL04vaA66hzPKNeFb2F+T6BU35d1AyjTVhx0I/Hjdw5VJ7\r\nYsh47UKAddoLkLRWSSRJcw+isVHp+4DH6Y2pSFojFJM4pJO9LmSH6gXO+khn\r\n4eIGWLb8xAviutn0ZSqalyDjrzYEP5e9CVFoPYpsqyq52RO+NXZpC/Z/rBKU\r\ngaMeXoslTNjqLJl3GYOQH+nVQUUl0eqja+5UCCZW740h9BW/qfMg3NHtc4P6\r\nJa3H1jsGdZk1qdMTsy6NFKI4slXFBF4XebOTU5stNRI85kc96WhODyA11oba\r\nKmDcagY7oFH4F4udYq7rtp5PoGcpoPe69Oz6VrRNMCewWg3kzs/rVGNsnCNA\r\n2QKyJSI7jkU/B3eypNzI6ffLKJrOkR35X1Ra/V1cPIxRI5iDv+sF9eq2INqD\r\njHHZJGDKZz1hUPiKyS+n6qHC3QV6bz/l9SDTOM9akmsJRL3YWjyuiBWVe4EU\r\nHa8dSCP91z+pjIFEoySq3zVl2oBEry6wvaI=\r\n=SD/a\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"7iomka","email":"7iomka@gmail.com"},"directories":{},"maintainers":[{"name":"7iomka","email":"7iomka@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/media_1.0.1_1655920542586_0.4681103960612889"},"_hasShrinkwrap":false},"1.0.2":{"name":"@7iomka/media","version":"1.0.2","description":"CSS-only wrappers for media query based containers","main":"dist/index.js","publishConfig":{"registry":"https://registry.npmjs.org/"},"engines":{"node":">=12.20.2","yarn":"1.x.x"},"typings":"dist/index.d.ts","scripts":{"clean":"rm -rf dist","compile":"babel src --out-dir dist -s --source-maps --extensions '.ts,.tsx' --ignore src/**/__test__","lint":"tslint -c tslint.json --project tsconfig.json","precommit":"lint-staged","prepush":"yarn run type-check","prepublishOnly":"yarn clean && yarn compile && yarn type-declarations","prettier":"prettier","prettier-project":"yarn prettier-write 'src/**/*.{ts,tsx}'","prettier-write":"yarn prettier --write","release":"auto shipit","test":"yarn type-check && yarn lint && yarn jest","type-check":"tsc --emitDeclarationOnly --pretty","type-declarations":"tsc --emitDeclarationOnly","watch":"concurrently --raw --kill-others 'yarn compile -w' 'tsc --emitDeclarationOnly -w'"},"repository":{"type":"git","url":"git+ssh://git@github.com/7iomka/media.git"},"authors":["Eloy Durán ","Znacovean Simion <7iomka@gmail.com>"],"license":"MIT","bugs":{"url":"https://github.com/7iomka/media/issues"},"homepage":"https://github.com/7iomka/media#readme","peerDependencies":{"react":">=16.3.0"},"devDependencies":{"@artsy/auto-config":"1.1.0","@artsy/detect-responsive-traits":"0.1.0","@babel/cli":"7.15.4","@babel/core":"7.0.0","@babel/node":"7.0.0","@babel/plugin-proposal-class-properties":"7.1.0","@babel/preset-env":"7.0.0","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.0.0","@types/chalk":"2.2.0","@types/express":"4.16.0","@types/jest":"23.3.1","@types/node":"10.9.4","@types/react":"17.0.0","@types/react-dom":"17.0.0","@types/react-test-renderer":"17.0.0","@types/webpack-dev-server":"3.1.1","babel-core":"7.0.0-bridge.0","babel-jest":"23.4.2","babel-loader":"8.0.4","babel-preset-env":"1.7.0","chalk":"2.4.1","concurrently":"3.6.1","express":"4.16.4","husky":"0.14.3","jest":"24.9.0","jest-styled-components":"6.2.2","lint-staged":"7.3.0","prettier":"1.17.1","react":"17.0.1","react-dom":"17.0.1","react-test-renderer":"17.0.1","static-extend":"0.1.2","styled-components":"3.4.5","tslint":"5.20.1","tslint-config-prettier":"1.15.0","tslint-react":"3.6.0","typescript":"4.7.4","typescript-styled-plugin":"0.18.1","webpack":"4.46.0","webpack-dev-server":"4.2.1"},"lint-staged":{"*.@(ts|tsx)":["tslint -c tslint.json --fix","yarn prettier-write --","git add"]},"prettier":{"semi":false,"singleQuote":false,"trailingComma":"es5","bracketSpacing":true,"proseWrap":"always"},"jest":{"transform":{".(ts|tsx)":"babel-jest"},"testRegex":"(/__tests__/.*|\\.(test))\\.(ts|tsx)$","testPathIgnorePatterns":["/dist/"],"moduleFileExtensions":["ts","tsx","js"],"modulePathIgnorePatterns":["/dist/*"],"moduleDirectories":["node_modules","/src"]},"keywords":["react","responsive"],"gitHead":"928149ba5a7c1c2ea3fffbea1d1c93438f639ac0","_id":"@7iomka/media@1.0.2","_nodeVersion":"16.15.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-eB+5EYlHymbfDvdAt4mtnBAIwIjOVWb1AOnycZ0Z0ik65GBlGdbkHwMWN/fO5aUvI96m01MyqAH07g5LOclUEg==","shasum":"7c595640c8e123b3f36e781d6576117465d3f510","tarball":"https://registry.npmjs.org/@7iomka/media/-/media-1.0.2.tgz","fileCount":21,"unpackedSize":133745,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD4aCUy97y8jXpDKSVypTyn+DNlpuGmGiEeE6U6lttOSQIhAIC8r0Yopr3calWz0cbf9loXungbU3J0vynWm9gwYAqB"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis1jFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO8g/9Gq1Bq/rBGq8Glw/5LSdnuTmSZljL1hdH7m5VrjepO5QPVayt\r\nUeKrazNsVqnr9XRSAV3GjkZzEBbNQw3lqOO4ubiGO9wczNjTQjFmi7QOIi1L\r\nNvPMPqpYew8W7LAZ4rCfEZ3/1oAdeVxjW575Qb/sm9Vt1ap1DFxSbVo2RxfR\r\njNZG0aUKFKy66WQhsuTJWWEUqet5zZaIRTnZxBxiF861vmSpAGfEFW1RxLnR\r\n4kuv46r2gJBtyTcQXwJNlcvUu8Z/QHot/FTIcWTHb58TPP9rM1uwujxzFTuR\r\ni3ZGyURJcAS1zEqJ3MapdCVsGycepMzZ9mDZCRW8+r4cXst7Ag/KaWxVWJ1z\r\nVKAIly6byILCxMjrd7nJeF5f4TU9pQdfcX0VETfLbSrK8q5OxcQwFO5SoipZ\r\n/LXkVeGMvh85+8/fqvtvMfHhgHcaK/4dzL2CWpwaK0JVNEQt3c+S+RWrC2My\r\nFCqiF92tA9sLGIOUothfs96xt4JpV5nSQqSeso23N0hJ35IZFGGhSQZ9ZYFe\r\n0OxfN1dpkbaI8bnyHPn5bMXdABqUgxf9/u982S7vv59UYusg1u4iEA74/zGP\r\nJR3sUWrHUG688yJWo5mas9B4URd19iinlECIIXjDl9ni5JuqPQxYteAx3AtQ\r\nZvZKQ0QJjuNQKKH7VbHU6qiaiNyNq6YZ7qI=\r\n=C0cC\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"7iomka","email":"7iomka@gmail.com"},"directories":{},"maintainers":[{"name":"7iomka","email":"7iomka@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/media_1.0.2_1655920837622_0.6894335844971098"},"_hasShrinkwrap":false},"1.0.3":{"name":"@7iomka/media","version":"1.0.3","description":"CSS-only wrappers for media query based containers","main":"dist/index.js","publishConfig":{"registry":"https://registry.npmjs.org/"},"engines":{"node":">=12.20.2","yarn":"1.x.x"},"typings":"dist/index.d.ts","scripts":{"clean":"rm -rf dist","compile":"babel src --out-dir dist -s --source-maps --extensions '.ts,.tsx' --ignore src/**/__test__","lint":"tslint -c tslint.json --project tsconfig.json","precommit":"lint-staged","prepush":"yarn run type-check","prepublishOnly":"yarn clean && yarn compile && yarn type-declarations","prettier":"prettier","prettier-project":"yarn prettier-write 'src/**/*.{ts,tsx}'","prettier-write":"yarn prettier --write","release":"auto shipit","test":"yarn type-check && yarn lint && yarn jest","type-check":"tsc --emitDeclarationOnly --pretty","type-declarations":"tsc --emitDeclarationOnly","watch":"concurrently --raw --kill-others 'yarn compile -w' 'tsc --emitDeclarationOnly -w'"},"repository":{"type":"git","url":"git+ssh://git@github.com/7iomka/media.git"},"authors":["Eloy Durán ","Znacovean Simion <7iomka@gmail.com>"],"license":"MIT","bugs":{"url":"https://github.com/7iomka/media/issues"},"homepage":"https://github.com/7iomka/media#readme","peerDependencies":{"react":">=16.3.0"},"devDependencies":{"@artsy/auto-config":"1.1.0","@artsy/detect-responsive-traits":"0.1.0","@babel/cli":"7.15.4","@babel/core":"7.0.0","@babel/node":"7.0.0","@babel/plugin-proposal-class-properties":"7.1.0","@babel/plugin-proposal-optional-chaining":"^7.17.12","@babel/preset-env":"7.0.0","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.0.0","@types/chalk":"2.2.0","@types/express":"4.16.0","@types/jest":"23.3.1","@types/node":"10.9.4","@types/react":"17.0.0","@types/react-dom":"17.0.0","@types/react-test-renderer":"17.0.0","@types/webpack-dev-server":"3.1.1","babel-core":"7.0.0-bridge.0","babel-jest":"23.4.2","babel-loader":"8.0.4","babel-preset-env":"1.7.0","chalk":"2.4.1","concurrently":"3.6.1","express":"4.16.4","husky":"0.14.3","jest":"24.9.0","jest-styled-components":"6.2.2","lint-staged":"7.3.0","prettier":"^2.7.1","react":"17.0.1","react-dom":"17.0.1","react-test-renderer":"17.0.1","static-extend":"0.1.2","styled-components":"3.4.5","tslint":"^6.1.3","tslint-config-prettier":"^1.18.0","tslint-react":"^5.0.0","typescript":"4.7.4","typescript-styled-plugin":"0.18.1","webpack":"4.46.0","webpack-dev-server":"4.2.1"},"lint-staged":{"*.@(ts|tsx)":["tslint -c tslint.json --fix","yarn prettier-write --","git add"]},"prettier":{"semi":false,"singleQuote":false,"trailingComma":"es5","bracketSpacing":true,"proseWrap":"always"},"jest":{"transform":{".(ts|tsx)":"babel-jest"},"testRegex":"(/__tests__/.*|\\.(test))\\.(ts|tsx)$","testPathIgnorePatterns":["/dist/"],"moduleFileExtensions":["ts","tsx","js"],"modulePathIgnorePatterns":["/dist/*"],"moduleDirectories":["node_modules","/src"]},"keywords":["react","responsive"],"gitHead":"5f007e011ee615e1d3cc472d43274bd9db79bf7d","_id":"@7iomka/media@1.0.3","_nodeVersion":"16.15.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-vJFpbjcvAeDXq7f9G5cV5upsbowyXhHQ0+Ma4sK5rbkIHDWcodOpYkv45i2JrRzmmCsV2+QF0ci5FAGS7MrWyQ==","shasum":"581eb23562d933dc1632de7768269704220e722b","tarball":"https://registry.npmjs.org/@7iomka/media/-/media-1.0.3.tgz","fileCount":21,"unpackedSize":130198,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCICP/6ykNP04WKSlB/nwkZpkEml6iFlL5ziTkJhTmvp7sAiEAs1YA3KOyk5I233F1H0ouZhdigHvE9aFoHxyIZ18QiGA="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis28mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3YhAAgqebXVmkdA8UZFLWY/VyCjf/SpRy2JGnvh/dOD74gzE+CoLM\r\ncWm7Txjb3sik7CnH1VbQ5U7wlW8JW4MLsj6hpELrexocbf877R+2ah/+TEpj\r\nil3H9YNtq55ZsVL/efar90F00sbn9PT+HNo7Zz5ZFpY9Be9uzDK0QwJliYJ8\r\nPauoeWcITCXQtHWrkr4XEOHFWGBhVDOB1m3ca7yTEmMRYaCstPx5WmSaKawn\r\nF7r/+WrYCB5ba5HFtFzd04fyrZ0TGx42TUk9sInU5LEPcxkz6UdkunvzqE5a\r\nQ57O7Wsqtu3+1MLShLXZU6AxFwLVTq/XYAnfP0SoTFWZNQWrw+kPf+NHZYrX\r\noDo9PKflzvKqN//qPdaEzPG6KA71gjpaMKL1O1CWO1nm3HqlBb7BwsQvlctx\r\nYu/pc1rJ3oUB0sM8IkqAmTPP7WYQviby1SQaXpwWkApVgycofeHXlXko9puX\r\n3hKQgnBxtVXmWINWDACAtnI7QT3Cba0BrCHjjJ4R1GuGSJzT+7U5tcuKzmYm\r\nK9zyxBPcM0wMPVKOqSbMgWdiSdcg5OJOjaLoCyouGP+Z2kdxPy0Md4QK1CKb\r\nZHaBJ/K4yr4Wpnfhi/wMJ1jB8VeK1fNPAoAdV/B9j8dWHAJcafQRrE+BoGxO\r\nGaQjLtnWY33lTR6CqFick1C6AYYt6Kk9iQY=\r\n=1cM3\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"7iomka","email":"7iomka@gmail.com"},"directories":{},"maintainers":[{"name":"7iomka","email":"7iomka@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/media_1.0.3_1655926566802_0.4581657198990994"},"_hasShrinkwrap":false},"1.0.4":{"name":"@7iomka/media","version":"1.0.4","description":"CSS-only wrappers for media query based containers","main":"dist/index.js","publishConfig":{"registry":"https://registry.npmjs.org/"},"engines":{"node":">=12.20.2","yarn":"1.x.x"},"typings":"dist/index.d.ts","scripts":{"clean":"rm -rf dist","compile":"babel src --out-dir dist -s --source-maps --extensions '.ts,.tsx' --ignore src/**/__test__","lint":"tslint -c tslint.json --project tsconfig.json","precommit":"lint-staged","prepush":"yarn run type-check","prepublishOnly":"yarn clean && yarn compile && yarn type-declarations","prettier":"prettier","prettier-project":"yarn prettier-write 'src/**/*.{ts,tsx}'","prettier-write":"yarn prettier --write","release":"auto shipit","test":"yarn type-check && yarn lint && yarn jest","type-check":"tsc --emitDeclarationOnly --pretty","type-declarations":"tsc --emitDeclarationOnly","watch":"concurrently --raw --kill-others 'yarn compile -w' 'tsc --emitDeclarationOnly -w'"},"repository":{"type":"git","url":"git+ssh://git@github.com/7iomka/media.git"},"authors":["Eloy Durán ","Znacovean Simion <7iomka@gmail.com>"],"license":"MIT","bugs":{"url":"https://github.com/7iomka/media/issues"},"homepage":"https://github.com/7iomka/media#readme","peerDependencies":{"react":">=16.3.0"},"devDependencies":{"@artsy/auto-config":"1.1.0","@artsy/detect-responsive-traits":"0.1.0","@babel/cli":"7.15.4","@babel/core":"7.0.0","@babel/node":"7.0.0","@babel/plugin-proposal-class-properties":"7.1.0","@babel/plugin-proposal-optional-chaining":"^7.17.12","@babel/preset-env":"7.0.0","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.0.0","@types/chalk":"2.2.0","@types/express":"4.16.0","@types/jest":"23.3.1","@types/node":"10.9.4","@types/react":"17.0.0","@types/react-dom":"17.0.0","@types/react-test-renderer":"17.0.0","@types/webpack-dev-server":"3.1.1","babel-core":"7.0.0-bridge.0","babel-jest":"23.4.2","babel-loader":"8.0.4","babel-preset-env":"1.7.0","chalk":"2.4.1","concurrently":"3.6.1","express":"4.16.4","husky":"0.14.3","jest":"24.9.0","jest-styled-components":"6.2.2","lint-staged":"7.3.0","prettier":"^2.7.1","react":"17.0.1","react-dom":"17.0.1","react-test-renderer":"17.0.1","static-extend":"0.1.2","styled-components":"3.4.5","tslint":"^6.1.3","tslint-config-prettier":"^1.18.0","tslint-react":"^5.0.0","typescript":"4.7.4","typescript-styled-plugin":"0.18.1","webpack":"4.46.0","webpack-dev-server":"4.2.1"},"lint-staged":{"*.@(ts|tsx)":["tslint -c tslint.json --fix","yarn prettier-write --","git add"]},"prettier":{"semi":false,"singleQuote":false,"trailingComma":"es5","bracketSpacing":true,"proseWrap":"always"},"jest":{"transform":{".(ts|tsx)":"babel-jest"},"testRegex":"(/__tests__/.*|\\.(test))\\.(ts|tsx)$","testPathIgnorePatterns":["/dist/"],"moduleFileExtensions":["ts","tsx","js"],"modulePathIgnorePatterns":["/dist/*"],"moduleDirectories":["node_modules","/src"]},"keywords":["react","responsive"],"gitHead":"1377d4270fc6cbc7617d8a176c1332029bcb828c","_id":"@7iomka/media@1.0.4","_nodeVersion":"16.15.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-i4k0eIS2r97Llp4Kt2XYdXwmvjR9j6Z7ZCEytd7nhAxNaBOvPJeiw6crTrDxQfCSUMk7KafwjYjeSgLV4wIvVQ==","shasum":"2de383989473af7daeb678b8ff501c5e03dca94d","tarball":"https://registry.npmjs.org/@7iomka/media/-/media-1.0.4.tgz","fileCount":21,"unpackedSize":130665,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCQj8HpyWs0wSisxWoru9JLmrWXZvOgPjO/OWmrV1YNBgIgbwJV4vPKDsvkvfYx2VRY6+RoGNxxNWZF8WnTg5i+WgM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis3FhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp94hAAo0gQe3o4mExsZGJxM5il/6RnM/awGpdSFpLD+x0c2zLblppf\r\n2RYxum21v0fZ4hebWbj6de6Ip8/WtdyUzapjY08M3zyAEVTw7J1k340TJiTZ\r\nHqRfBB90MtSr+5CE9nkVsr9yrGdsiCjHFx3zOsKKMBJRpEpRf9xR4B7xrBVA\r\n5igJfpU2R73nQ54gI/8CXXbkq+mw2GlxQn+MQxKZdHTiEB8ApAeCRJjJOkuZ\r\nY66LG2KHkO3GsxLFcUoG6tRsBEFAq+MX7aZmhFluA7UQhG5Ugpwg2fKF6jJ0\r\niNeMYbF+3cNG6dtdhfWkrHlzy6HpTCtq13Nc7ZeQun7EFP1nvxVpwWJIC1Dm\r\n5yzbASzNPUWFZLfTPerPZx75iY8LkzIwDbpmzIKsKQASAMlIkQx5Jsrbfirg\r\nwwH0N9KCCeHCe11h+H2rzgu0h/iyzNDLZeydEZLcNlkigsdHpwWpA/27kHvQ\r\nXy91UvNe/1g/TWN3Hx4Vtt++CO+9WIXO1c+RivVz8IbetFHNCVG+m+hqPjJH\r\nYPlOGnM8WNQMaHKjp+CjmWRMQ/fIzjYSSrTrOgL8nwAZ9VR/k6FZX046fXdH\r\nbIfN/UE5xZ0YJaVHCZ6MrOIPRmN8CkpmtKWRd+oB9bc5ABu2fI5eBqEoE2I7\r\nln05ung64PqBw1V7HetZO5qlcH8t55AZjJY=\r\n=GcXK\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"7iomka","email":"7iomka@gmail.com"},"directories":{},"maintainers":[{"name":"7iomka","email":"7iomka@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/media_1.0.4_1655927136936_0.2949568781720313"},"_hasShrinkwrap":false},"1.0.5":{"name":"@7iomka/media","version":"1.0.5","description":"CSS-only wrappers for media query based containers","main":"dist/index.js","publishConfig":{"registry":"https://registry.npmjs.org/"},"engines":{"node":">=12.20.2","yarn":"1.x.x"},"typings":"dist/index.d.ts","scripts":{"clean":"rm -rf dist","compile":"babel src --out-dir dist -s --source-maps --extensions '.ts,.tsx' --ignore src/**/__test__","lint":"tslint -c tslint.json --project tsconfig.json","precommit":"lint-staged","prepush":"yarn run type-check","prepublishOnly":"yarn clean && yarn compile && yarn type-declarations","prettier":"prettier","prettier-project":"yarn prettier-write 'src/**/*.{ts,tsx}'","prettier-write":"yarn prettier --write","release":"auto shipit","test":"yarn type-check && yarn lint && yarn jest","type-check":"tsc --emitDeclarationOnly --pretty","type-declarations":"tsc --emitDeclarationOnly","watch":"concurrently --raw --kill-others 'yarn compile -w' 'tsc --emitDeclarationOnly -w'"},"repository":{"type":"git","url":"git+ssh://git@github.com/7iomka/media.git"},"authors":["Eloy Durán ","Znacovean Simion <7iomka@gmail.com>"],"license":"MIT","bugs":{"url":"https://github.com/7iomka/media/issues"},"homepage":"https://github.com/7iomka/media#readme","peerDependencies":{"react":">=17.0.0"},"devDependencies":{"@artsy/auto-config":"1.1.0","@artsy/detect-responsive-traits":"0.1.0","@babel/cli":"7.15.4","@babel/core":"7.0.0","@babel/node":"7.0.0","@babel/plugin-proposal-class-properties":"7.1.0","@babel/plugin-proposal-optional-chaining":"^7.17.12","@babel/preset-env":"7.0.0","@babel/preset-react":"7.0.0","@babel/preset-typescript":"7.0.0","@types/chalk":"2.2.0","@types/express":"4.16.0","@types/jest":"23.3.1","@types/node":"10.9.4","@types/react":"17.0.0","@types/react-dom":"17.0.0","@types/react-test-renderer":"17.0.0","@types/webpack-dev-server":"3.1.1","babel-core":"7.0.0-bridge.0","babel-jest":"23.4.2","babel-loader":"8.0.4","babel-preset-env":"1.7.0","chalk":"2.4.1","concurrently":"3.6.1","express":"4.16.4","husky":"0.14.3","jest":"24.9.0","jest-styled-components":"6.2.2","lint-staged":"7.3.0","prettier":"^2.7.1","react":"17.0.1","react-dom":"17.0.1","react-test-renderer":"17.0.1","static-extend":"0.1.2","styled-components":"3.4.5","tslint":"^6.1.3","tslint-config-prettier":"^1.18.0","tslint-react":"^5.0.0","typescript":"4.7.4","typescript-styled-plugin":"0.18.1","webpack":"4.46.0","webpack-dev-server":"4.2.1"},"lint-staged":{"*.@(ts|tsx)":["tslint -c tslint.json --fix","yarn prettier-write --","git add"]},"prettier":{"semi":false,"singleQuote":false,"trailingComma":"es5","bracketSpacing":true,"proseWrap":"always"},"jest":{"transform":{".(ts|tsx)":"babel-jest"},"testRegex":"(/__tests__/.*|\\.(test))\\.(ts|tsx)$","testPathIgnorePatterns":["/dist/"],"moduleFileExtensions":["ts","tsx","js"],"modulePathIgnorePatterns":["/dist/*"],"moduleDirectories":["node_modules","/src"]},"keywords":["react","responsive"],"gitHead":"9003055b82fcce8302caede2d0e40fe41a311678","_id":"@7iomka/media@1.0.5","_nodeVersion":"16.15.0","_npmVersion":"8.3.0","dist":{"integrity":"sha512-zynwkFaE7ZG3kSzdVWMQLHVleYBXi/7zQocbtXIwycBjrslIxVCDBhQchR3Vc+5Cpa43n/G4DAO/KQZztjVsgA==","shasum":"5c4d02163ff68c6ae65d233d80c159236e446de7","tarball":"https://registry.npmjs.org/@7iomka/media/-/media-1.0.5.tgz","fileCount":21,"unpackedSize":130729,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDAt7SgTWqdegC93UX5rvsobDBAR1Jxbq7kv4GyG2uXZQIhAMGyq7T/66KECh1o5e8GWrAizxV/d333FAVvgs4XQB/3"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TcrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqYDQ//eUR8ZH+9NdnVwfqebsU6eZcJlEhCzWDlzgaGn92NsO+m/TBt\r\nqd4Cz8YVq9QWJ4x8qDf22VMhW/SdNjgO5/KOtr4QIegN/I70Ld26I7UA4gCM\r\n5Ke/LUKxbypQYpM/S1h88+pjhiFVFjVs4VzDVuonv3+dGQpHDYvCc98FZIEw\r\nExoyxBRS+uW42u3sA2IU4ra47vHRQHvMhwtXFW/SZyWz9XwXuIJEcpdZ80wQ\r\nzqGbQpErFpbf1mHwhZt1vtu64p1CLi3uV07v1GGVfg5SuVve5g0UdJdT0t5g\r\nwoojb/WoXjptUqpjwto/slIS78+tjuDi7CWtyAOuhRgesJf+q6lxQ+xhPRww\r\nTPxpxd82A10sdoS10reetJV9gJi3jOmBzYTTmZ3IHRrHvO17dmWG39sK+XLV\r\nUE8t49zUUkp+IlC8tC1ATrd2dJtKY3IH48oVX3wM7wdt/ldttjXwrSAGJ1wq\r\nqsMm3JT4b8KL0lylzoYiNkF0zB39cdoJkH9Y3o87cBjQUCdVRn59DpfgDb0v\r\nLi09VtOnR0mrhzZmhUTZD/QiQL+gv/Y9qdB7AXWmz7xCPFn1VtYBCNppZdq7\r\nRwTiB26HGlp1BtjNFneToXgHLtE5o3f79PmBiduVN53ZD8GHA03K7cz3G9Bc\r\nxjjZ/Pyi247wR2Htc3oioCwpJmjfu17blCI=\r\n=LPP+\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"7iomka","email":"7iomka@gmail.com"},"directories":{},"maintainers":[{"name":"7iomka","email":"7iomka@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/media_1.0.5_1658140459693_0.4694776008684811"},"_hasShrinkwrap":false}},"time":{"created":"2022-06-22T17:43:22.620Z","1.0.0":"2022-06-22T17:43:22.867Z","modified":"2022-07-18T10:34:19.936Z","1.0.1":"2022-06-22T17:55:42.823Z","1.0.2":"2022-06-22T18:00:37.801Z","1.0.3":"2022-06-22T19:36:06.951Z","1.0.4":"2022-06-22T19:45:37.178Z","1.0.5":"2022-07-18T10:34:19.851Z"},"maintainers":[{"name":"7iomka","email":"7iomka@gmail.com"}],"description":"CSS-only wrappers for media query based containers","homepage":"https://github.com/7iomka/media#readme","keywords":["react","responsive"],"repository":{"type":"git","url":"git+ssh://git@github.com/7iomka/media.git"},"bugs":{"url":"https://github.com/7iomka/media/issues"},"license":"MIT","readme":"# @7iomka/media\n\n[![CircleCI][ci-icon]][ci] [![npm version][npm-icon]][npm]\n\n## Installation\n\n```sh\n yarn add @7iomka/media\n```\n\n**Table of Contents**\n\n- [@7iomka/media](#7iomkamedia)\n - [Installation](#installation)\n - [Overview](#overview)\n - [Basic Example](#basic-example)\n - [Server-side Rendering (SSR) Usage](#server-side-rendering-ssr-usage)\n - [SSR Example](#ssr-example)\n - [Usage with Gatsby or Next](#usage-with-gatsby-or-next)\n - [Example Apps](#example-apps)\n - [Why not conditionally render?](#why-not-conditionally-render)\n - [API](#api)\n - [createMedia](#createmedia)\n - [MediaContextProvider](#mediacontextprovider)\n - [Media](#media)\n - [createMediaStyle](#createmediastyle)\n - [onlyMatch](#onlymatch)\n - [at](#at)\n - [lessThan](#lessthan)\n - [greaterThan](#greaterthan)\n - [greaterThanOrEqual](#greaterthanorequal)\n - [between](#between)\n - [Pros vs Cons](#pros-vs-cons)\n\n## Overview\n\nWhen writing responsive components it's common to use media queries to adjust\nthe display when certain conditions are met. Historically this has taken place\ndirectly in CSS/HTML:\n\n```css\n@media screen and (max-width: 767px) {\n .my-container {\n width: 100%;\n }\n}\n@media screen and (min-width: 768px) {\n .my-container {\n width: 50%;\n }\n}\n```\n\n```html\n
\n```\n\nBy hooking into a breakpoint definition, `@7iomka/media` takes this declarative\napproach and brings it into the React world.\n\n## Basic Example\n\n```tsx\nimport React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { createMedia } from \"@7iomka/media\"\n\nconst { MediaContextProvider, Media } = createMedia({\n // breakpoints values can be either strings or integers\n breakpoints: {\n sm: 0,\n md: 768,\n lg: 1024,\n xl: 1192,\n },\n})\n\nconst App = () => (\n \n \n \n \n \n \n \n \n \n \n \n)\n\nReactDOM.render(, document.getElementById(\"react\"))\n```\n\n## Server-side Rendering (SSR) Usage\n\nThe first important thing to note is that when server-rendering with\n`@7iomka/media`, all breakpoints get rendered by the server. Each `Media`\ncomponent is wrapped by plain CSS that will only show that breakpoint if it\nmatches the user's current browser size. This means that the client can\naccurately start rendering the HTML/CSS while it receives the markup, which is\nlong before the React application has booted. This improves perceived\nperformance for end-users.\n\nWhy not just render the one that the current device needs? We can't accurately\nidentify which breakpoint your device needs on the server. We could use a\nlibrary to sniff the browser user-agent, but those aren't always accurate, and\nthey wouldn't give us all the information we need to know when we are\nserver-rendering.\n\n### SSR Example\n\nFirst, configure `@7iomka/media` in a `Media` file that can be shared across\nthe app:\n\n```tsx\n// Media.tsx\n\nimport { createMedia } from \"@7iomka/media\"\n\nconst ExampleAppMedia = createMedia({\n breakpoints: {\n sm: 0,\n md: 768,\n lg: 1024,\n xl: 1192,\n },\n})\n\n// Generate CSS to be injected into the head\nexport const mediaStyle = ExampleAppMedia.createMediaStyle()\nexport const { Media, MediaContextProvider } = ExampleAppMedia\n```\n\nCreate a new `App` file which will be the launching point for our application:\n\n```tsx\n// App.tsx\n\nimport React from \"react\"\nimport { Media, MediaContextProvider } from \"./Media\"\n\nexport const App = () => {\n return (\n \n Hello mobile!\n Hello desktop!\n \n )\n}\n```\n\nMount `` on the client:\n\n```tsx\n// client.tsx\n\nimport React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport { App } from \"./App\"\n\nReactDOM.render(, document.getElementById(\"react\"))\n```\n\nThen on the server, setup SSR rendering and pass `mediaStyle` into a `\n \n \n
${html}
\n\n \n \n \n `)\n})\n\napp.listen(3000, () => {\n console.warn(\"\\nApp started at http://localhost:3000 \\n\")\n})\n```\n\nAnd that's it! To test, disable JS and scale your browser window down to a\nmobile size and reload; it will correctly render the mobile layout without the\nneed to use a user-agent or other server-side \"hints\".\n\n## Usage with Gatsby or Next\n\n`@7iomka/media` works great with Gatsby or Next.js's static hybrid approach to\nrendering. See the examples below for a simple implementation.\n\n## Example Apps\n\nThere are four examples one can explore in the `/examples` folder:\n\n- [Next](examples/nextjs)\n\n## Why not conditionally render?\n\nOther existing solutions take a conditionally rendered approach, such as\n[`react-responsive`][react-responsive] or [`react-media`][react-media], so where\ndoes this approach differ?\n\nServer side rendering!\n\nBut first, what is conditional rendering?\n\nIn the React ecosystem a common approach to writing declarative responsive\ncomponents is to use the browser’s [`matchMedia` api][match-media-api]:\n\n```tsx\n\n {({ sm }) => {\n if (sm) {\n return \n } else {\n return \n }\n }}\n\n```\n\nOn the client, when a given breakpoint is matched React conditionally renders a\ntree.\n\nHowever, this approach has some limitations for what we wanted to achieve with\nour server-side rendering setup:\n\n- It's impossible to reliably know the user's current breakpoint during the\n server render phase since that requires a browser.\n\n- Setting breakpoint sizes based on user-agent sniffing is prone to errors due\n the inability to precisely match device capabilities to size. One mobile\n device might have greater pixel density than another, a mobile device may fit\n multiple breakpoints when taking device orientation into consideration, and on\n desktop clients there is no way to know at all. The best devs can do is guess\n the current breakpoint and populate `` with assumed state.\n\nArtsy settled on what we think makes the best trade-offs. We approach this\nproblem in the following way:\n\n1. Render markup for all breakpoints on the server and send it down the wire.\n\n1. The browser receives markup with proper media query styling and will\n immediately start rendering the expected **visual** result for whatever\n viewport width the browser is at.\n\n1. When all JS has loaded and React starts the rehydration phase, we query the\n browser for what breakpoint it’s currently at and then limit the rendered\n components to the matching media queries. This prevents life-cycle methods\n from firing in hidden components and unused html being re-written to the DOM.\n\n1. Additionally, we register event listeners with the browser to notify the\n `MediaContextProvider` when a different breakpoint is matched and then\n re-render the tree using the new value for the `onlyMatch` prop.\n\nLet’s compare what a component tree using `matchMedia` would look like with our\napproach:\n\n\n\n\n\n
BeforeAfter
\n\n```tsx\n\n {({ sm }) => {\n if (sm) return \n else return \n }}\n\n```\n\n\n\n```tsx\n<>\n \n \n \n \n \n \n\n```\n\n
\n\n\n## API\n\n### createMedia\n\nFirst things first. You’ll need to define the breakpoints and interaction needed\nfor your design to produce the set of media components you can use throughout\nyour application.\n\nFor example, consider an application that has the following breakpoints:\n\n- A viewport width between 0 and 768 (768 not included) points, named `sm`.\n- A viewport width between 768 and 1024 (1024 not included) points, named `md`.\n- A viewport width between 1024 and 1192 (1192 not included) points, named `lg`.\n- A viewport width from 1192 points and above, named `xl`.\n\nAnd the following interactions:\n\n- A device that supports hovering a pointer device, named `hover`.\n- A device that does not support hovering a pointer device, named `notHover`.\n\nYou would then produce the set of media components like so:\n\n```tsx\n// Media.tsx\n\nconst ExampleAppMedia = createMedia({\n breakpoints: {\n sm: 0,\n md: 768,\n lg: 1024,\n xl: 1192,\n },\n interactions: {\n hover: \"(hover: hover)\",\n notHover: \"(hover: none)\",\n landscape: \"not all and (orientation: landscape)\",\n portrait: \"not all and (orientation: portrait)\",\n },\n})\n\nexport const { Media, MediaContextProvider, createMediaStyle } = ExampleAppMedia\n```\n\nAs you can see, breakpoints are defined by their _start_ offset, where the first\none is expected to start at 0.\n\n### MediaContextProvider\n\nThe `MediaContextProvider` component influences how `Media` components will be\nrendered. Mount it at the root of your component tree:\n\n```tsx\nimport React from \"react\"\nimport { MediaContextProvider } from \"./Media\"\n\nexport const App = () => {\n return ...\n}\n```\n\n### Media\n\nThe `Media` component created for your application has a few mutually exclusive\nprops that make up the API you’ll use to declare your responsive layouts. These\nprops all operate based on the named breakpoints that were provided when you\ncreated the media components.\n\n```tsx\nimport React from \"react\"\nimport { Media } from \"./Media\"\n\nexport const HomePage = () => {\n return (\n <>\n Hello mobile!\n Hello desktop!\n \n )\n}\n```\n\nThe examples given for each prop use breakpoint definitions as defined in the\nabove ‘Setup’ section.\n\nIf you would like to avoid the underlying div that is generated by `` and\ninstead use your own element, use the render-props form but be sure to **not**\nrender any children when not necessary:\n\n```tsx\nexport const HomePage = () => {\n return (\n <>\n Hello mobile!\n \n {(className, renderChildren) => {\n return (\n \n {renderChildren ? \"Hello desktop!\" : null}\n \n )\n }}\n \n \n )\n}\n```\n\n#### createMediaStyle\n\n> Note: This is only used when SSR rendering\n\nBesides the `Media` and `MediaContextProvider` components, there's a\n`createMediaStyle` function that produces the CSS styling for all possible media\nqueries that the `Media` instance can make use of while markup is being passed\nfrom the server to the client during hydration. If only a subset of breakpoint\nkeys is used those can be optional specified as a parameter to minimize the\noutput. Be sure to insert this within a `