{"_id":"@ag-media/use-match-media-hook","name":"@ag-media/use-match-media-hook","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.2":{"name":"@ag-media/use-match-media-hook","version":"1.0.2","main":"dist/bundle.js","module":"dist/bundle.esm.js","types":"src/types.d.ts","repository":{"type":"git","url":"git+https://github.com/ag-media/use-match-media.git"},"author":{"name":"Jepser Bernardino","email":"jepsersk8@gmail.com"},"license":"MIT","devDependencies":{"@babel/core":"^7.8.4","@babel/plugin-transform-typescript":"^7.8.3","@babel/preset-env":"^7.8.4","@babel/preset-react":"^7.8.3","@commitlint/cli":"^8.3.5","@commitlint/config-conventional":"^8.3.4","@storybook/preset-create-react-app":"^2.1.1","@storybook/react":"^5.3.18","@testing-library/react-hooks":"^3.2.1","@types/jest":"^25.1.1","@typescript-eslint/eslint-plugin":"^2.18.0","@typescript-eslint/parser":"^2.18.0","babel-jest":"^25.1.0","babel-loader":"^8.1.0","babel-preset-react-app":"^9.1.2","eslint":"^6.8.0","eslint-config-standard":"^14.1.0","eslint-plugin-import":"^2.20.1","eslint-plugin-node":"^11.0.0","eslint-plugin-promise":"^4.2.1","eslint-plugin-react":"^7.18.2","eslint-plugin-standard":"^4.0.1","husky":"^4.2.1","jest":"^25.1.0","lint-staged":"^10.0.7","markdown-loader":"^5.1.0","mq-polyfill":"^1.1.8","react":"^16.12.0","react-dom":"^16.12.0","react-test-renderer":"^16.12.0","rollup":"^1.31.0","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-peer-deps-external":"^2.2.2","semantic-release":"^17.0.7","storybook-readme":"^5.0.8","typescript":"^3.7.5"},"peerDependencies":{"react":">=16.12.0","react-dom":">=16.12.0"},"scripts":{"dev":"rollup -c -w","build":"rollup -c --environment INCLUDE_DEPS,BUILD:production","test":"jest --env=jsdom","semantic-release":"semantic-release","storybook":"start-storybook"},"lint-staged":{"src/**/*.{js,ts}":["eslint ./src --fix --ext .js,.ts","git add"]},"husky":{"hooks":{"pre-commit":"lint-staged","commit-msg":"commitlint -E HUSKY_GIT_PARAMS"}},"gitHead":"34b451d170635c7548a9f67861487a3d1ba84a40","description":"useMatchMedia react hook for responsive components.","bugs":{"url":"https://github.com/ag-media/use-match-media/issues"},"homepage":"https://github.com/ag-media/use-match-media#readme","_id":"@ag-media/use-match-media-hook@1.0.2","_nodeVersion":"16.15.1","_npmVersion":"9.1.3","dist":{"integrity":"sha512-qMC7VYqLcFp8lChUZt5YqEiA/jk5FkyGmbgfmA1+4i4Q03DxwrNfzqdS4I/ksvoSVTRx1uQSQGqvvTlPhS4Rsg==","shasum":"0736a37b81531bc5175c5362f031fe88ed1581e6","tarball":"https://registry.npmjs.org/@ag-media/use-match-media-hook/-/use-match-media-hook-1.0.2.tgz","fileCount":23,"unpackedSize":19927,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDVaZKgV1Cmc6isnWXe710joL/Ndy82yZhmclW8+Ug+1QIgWdeXrpRhqQpDHiHqFtIWBY9qC44OHJWEMEyTU35H4tY="}]},"_npmUser":{"name":"rontav","email":"mrvali97@gmail.com"},"directories":{},"maintainers":[{"name":"neacsugeorge","email":"geo997@gmail.com"},{"name":"rontav","email":"mrvali97@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-match-media-hook_1.0.2_1687878304677_0.7889332737613735"},"_hasShrinkwrap":false}},"time":{"created":"2023-06-27T15:05:04.627Z","1.0.2":"2023-06-27T15:05:04.835Z","modified":"2023-06-27T15:05:05.003Z"},"maintainers":[{"name":"neacsugeorge","email":"geo997@gmail.com"},{"name":"rontav","email":"mrvali97@gmail.com"}],"description":"useMatchMedia react hook for responsive components.","homepage":"https://github.com/ag-media/use-match-media#readme","repository":{"type":"git","url":"git+https://github.com/ag-media/use-match-media.git"},"author":{"name":"Jepser Bernardino","email":"jepsersk8@gmail.com"},"bugs":{"url":"https://github.com/ag-media/use-match-media/issues"},"license":"MIT","readme":"# use-match-media\nuseMatchMedia react hook for responsive components.\n\nThere are cases that is needed to set conditions outside the render/return of the component. For that another way to set a condition depending on the media query, is using a hook.\n\n### Installation\n\n1. Install `yarn add @ag-media/use-match-media-hook` or `npm i --save @ag-media/use-match-media-hook`\n\n### Arguments\n- queries : array of media queries following [the spec](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).\n- defaultValues : default values in case you want to control SSR default value, defaults to `false`\n\n### Usage\n\n#### Common usage:\n\n``` jsx\nimport useMatchMedia from '@ag-media/use-match-media-hook'\n\nconst queries = [\n '(max-width: 400px)',\n '(min-width: 800px)'\n]\n\nconst Component = () => {\n const [mobile, desktop] = useMatchMedia(queries)\n\n if(mobile) return \n\n return desktop ? : \n}\n```\n\n#### Desktop first strategy\n\nThe following example will render true in the server (if window doesn't exists).\n\n``` jsx\nimport useMatchMedia from '@ag-media/use-match-media-hook'\n\nconst queries = [\n '(min-width: 600px)'\n]\n\nconst Component = () => {\n const [desktop] = useMatchMedia(queries)\n\n return desktop ? : \n}\n```\n\n### Server side compatible\n\nSince there is not a reliable-simple way to know the client window, the library doesn't make any assuptions, but it lets you decide which is your SSR strategy.\n\nThe second argument is the initial value that is used in the SSR, so depending of the strategy you might want to set it as false or true.\n\n``` jsx\nimport useMatchMedia from '@ag-media/use-match-media-hook'\n\nconst queries = [\n '(min-width: 600px)'\n]\n\nconst Component = () => {\n const [desktop] = useMatchMedia(queries, [true]) // it receives a second argument with the SSR value, false by default\n\n return desktop ? : \n}\n```\n","readmeFilename":"README.md"}