{"_id":"@carpenjk/use-breakpoints","name":"@carpenjk/use-breakpoints","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@carpenjk/use-breakpoints","version":"1.0.0","description":"A library using breakpoints in react","main":"lib/index.js","scripts":{"build":"rimraf ./lib && tsc","prepublish":"npm run build","test":" jest","semantic-release":"semantic-release","commit":"git-cz"},"repository":{"type":"git","url":"git+https://github.com/carpenjk/use-breakpoints.git"},"release":{"branches":["main"]},"keywords":["prop-x","breakpoint","react"],"author":{"name":"Jeremy Carpenter"},"license":"Apache-2.0","bugs":{"url":"https://github.com/carpenjk/use-breakpoints/issues"},"homepage":"https://github.com/carpenjk/use-breakpoints#readme","devDependencies":{"@babel/cli":"^7.18.9","@babel/core":"^7.18.9","@babel/preset-env":"^7.18.9","@babel/preset-typescript":"^7.18.6","@carpenjk/prop-x-types":"^1.0.0","@jest/globals":"^29.3.1","@testing-library/react":"^13.4.0","@types/node":"^18.11.17","@types/react":"^18.0.26","@typescript-eslint/eslint-plugin":"^5.46.1","@typescript-eslint/parser":"^5.46.1","cz-conventional-changelog":"^3.3.0","eslint":"^8.29.0","eslint-config-standard":"^17.0.0","eslint-plugin-import":"^2.26.0","eslint-plugin-n":"^15.2.4","eslint-plugin-promise":"^6.0.0","jest":"^29.3.1","jest-environment-jsdom":"^29.3.1","jsdom":"^21.0.0","rimraf":"^3.0.2","semantic-release":"^19.0.3","ts-jest":"^29.0.5","typescript":"^4.9.4"},"publishConfig":{"access":"public"},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}},"peerDependencies":{"react":"17 - 18","react-dom":"17 - 18"},"dependencies":{"@babel/plugin-transform-react-jsx":"^7.20.7"},"types":"./lib/index.d.ts","gitHead":"c29781992d08df18de2675c361a49b55e9ca12b3","_id":"@carpenjk/use-breakpoints@1.0.0","_nodeVersion":"16.19.0","_npmVersion":"8.19.3","dist":{"integrity":"sha512-utA0fLmggG1Ep/InP/hTds7xC06Pzu4pA2Xb2JmL9X8I1GINJsazfHdmj96uRYS5gsO1o9NHb6e1ZpLoi25EnA==","shasum":"8e7f515f82f56b695cdc261de4e7600e3a6c2f85","tarball":"https://registry.npmjs.org/@carpenjk/use-breakpoints/-/use-breakpoints-1.0.0.tgz","fileCount":11,"unpackedSize":23888,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDChqZeN+qAtXaqbo0zogRm4P05xNPoWCG1ROO2o6xc7QIhAPdKZ/odM97RAa/isMQUe4r12Q3JBFnhRb8gwAa8ihLO"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvMqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMPBAAkkyQ8+fJdPK8DKi04tlc4j1iIaWL3MVr1ejQCjAWuhoseKWq\r\na7XBhGTfdtcSG6ZsQvSGAX8SgAN9wT4qX32t1+AjNBvuupQUPvL7NS8aIhsw\r\n1ZRCdlwoeNSYS+zIk6iF89Pd9CYpbWU48wuCQe/ShkPno+mp/zvevQkM1wb2\r\nZz06FIE9sBdzDsCJZg0nzGETu6JTwHzdZJN4WCiq/ln/kKP/+sTt6xTWbmhl\r\nCnaadmdZu7k7qa8yWow+w3ZIEvUgKLlEAMpUW4un+T/ePpVhjZzhLkI2OzIC\r\naSMN/5IUw9IBRL/gof76dqJxDHJGF9acnQGgoLjA6HJnIL6B9xWZIEH04snF\r\nGS/jvIT+P3JOjvguMjuA2dZu4kZkEKhvIvRAgeikv7KrU8Jy1JiBYM9//kjV\r\nPCSqSzJt8mJPYrHBE37g5gFLuutp/4hllkqXHklEe20YkHmz6SroJvp4W9N/\r\nF0hxSksBx69o/0sBeaTAwwybNk/W5YZnlXsCSQePshajxgLnoRXnwUCji0nO\r\njOLPI/boNoH7lVyz7BSCsAhvKFI5TWU7Ogq/WKjmwAs6+C1ZnJp+Tr/ou4+m\r\n678wmp/8gwPfYdeJchULumDffEgGFM4lZ4OihjdlcA17IHjfuNFGr0dOJL6O\r\np72htKeIcqcmSfUoM4vuOp1ELPz+SiPbpDE=\r\n=KGiO\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"carpenjk","email":"jcarpenterwebdev@gmail.com"},"directories":{},"maintainers":[{"name":"carpenjk","email":"jcarpenterwebdev@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-breakpoints_1.0.0_1673982762377_0.7432178357126416"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-17T19:12:42.294Z","1.0.0":"2023-01-17T19:12:42.507Z","modified":"2023-01-17T19:12:42.677Z"},"maintainers":[{"name":"carpenjk","email":"jcarpenterwebdev@gmail.com"}],"description":"A library using breakpoints in react","homepage":"https://github.com/carpenjk/use-breakpoints#readme","keywords":["prop-x","breakpoint","react"],"repository":{"type":"git","url":"git+https://github.com/carpenjk/use-breakpoints.git"},"author":{"name":"Jeremy Carpenter"},"bugs":{"url":"https://github.com/carpenjk/use-breakpoints/issues"},"license":"Apache-2.0","readme":"# use-breakpoints\n\nUseBreakpoints is React hook that provides values in relation to a set of breakpoints that are useful for conditionally rendering and using responsive properties when used with [prop-x](https://github.com/carpenjk/prop-x)\n\n## Installation\n\n```\n  npm i @carpenjk/use-breakpoints\n```\n\n## import\n\n```js\n  import { useBreakpoints } from '@carpenjk/use-breakpoints\n```\n\n## Usage\nThe useBreakpoints hooks provides access to the breakpoints and related functions and calculated values. It is useful for client side only code that needs to evaluate properties indexed by breakpoints.\n\n```js\nconst breakpoints: {\n    0: 0,\n    1: 880,\n    2: 1050,\n    3: 1200,\n    4: 1400,\n  }\n\nconst br = useBreakpoints(breakpoints);\n\n// assume current window.innerWidth = 1000\n//br = \n// {\n//   br: [0, 880 , 1050, 1200, 1400],\n//   upper: 1050,\n//   lower: 880,\n//   indexofLower: 1,\n//   ratio: 0.838, //(1- (upper - lower) / upper)\n//   current: {\n//      width: 1000\n//      height: 1080\n//    }\n\n    // br =\n      //new breakpoint object with numerical pixel values\n    //   br: {\n    //     0: 0,\n    //     1: 400,\n    //     2: 800,\n    //     3: 1200\n    //   },\n    //   //original breakpoint object\n    //   breakpoints: {\n    //     0: 0,\n    //     1: 880,\n    //     2: 1050,\n    //     3: 1200,\n    //     4: 1400,\n    //   },\n    //   upper: 1050, \n    //   lower: 880,\n    //   indexOfLower: \"0\",\n    //   ratio: 0.838 //1 - (upper - lower) / upper  // in consideration for future intellegent br functionality\n    //   current: { width: 1000, height: 1080 },  // window.innerWidth && window.innerHeight\n    //   toArray: expect.any(Function)  //array of breakpoints sorted ascendingly\n    // });\n\n// }\n\nconst indexedPropVal = getIndexedPropValue([100, 200, 300], br.indexOfLower);\n// indexedPropVal = 200;\n\n//conditional rendering can be done comparing sizes or with index of lower\nif(br.current.width > br.br[\"2\"]){\n  return (<SomeComponent>)\n}\n\nif(br.indexOfLower = br.br[\"2\"]){\n  return (<SomeComponent>)\n}\n\n```\n\n## Breakpoint Keys\n\nDue to the way native javascript functionality is defined, breakpoint keys must all appear to be numerical to the javascript compiler or can be alpha-numeric defined in ascending order\n\n```js\n  //this is fine\n  const breakpoints: {\n    0: 0,\n    1: 880,\n    2: 1050,\n    3: 1200,\n    4: 1400,\n  }\n\n//this is fine\n  const breakpoints: {\n    zero: 0,\n    sm: 880,\n    md: 1050,\n    lg: 1200,\n    xl: 1400,\n  }\n\n// this is not ok  (edit: this may be ok because the numerical-like key is the first defined)\n    const breakpoints: {\n    0: 0,\n    sm: 880,\n    md: 1050,\n    lg: 1200,\n    xl: 1400,\n  }\n```\n","readmeFilename":"README.md"}