{"_id":"@aaronpowell/react-foldable","_rev":"3-8bc54c62e635180e86f9f19441c71061","name":"@aaronpowell/react-foldable","dist-tags":{"latest":"0.3.0"},"versions":{"0.2.1":{"name":"@aaronpowell/react-foldable","version":"0.2.1","description":"React Foldable is a set of components that helps you work with multi-screen and foldable displays","main":"build/index.js","types":"build/index.d.ts","scripts":{"build":"tsc","watch":"tsc --watch","lint":"eslint src/**/*.ts","lint:fix":"npm run lint -- --fix"},"keywords":["react","surface-duo","dual-screen"],"author":{"name":"Aaron Powell","email":"me+github@aaron-powell.com","url":"https://www.aaron-powell.com"},"license":"MIT","devDependencies":{"@types/react":"^16.9.49","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^4.1.0","@typescript-eslint/parser":"^4.1.0","eslint":"^7.8.1","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","husky":"^4.3.0","prettier":"^2.1.1","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1"},"repository":{"type":"git","url":"git+https://github.com/aaronpowell/react-foldable.git"},"bugs":{"url":"https://github.com/aaronpowell/react-foldable/issues"},"homepage":"https://github.com/aaronpowell/react-foldable","husky":{"hooks":{"pre-commit":"npm run lint"}},"_id":"@aaronpowell/react-foldable@0.2.1","_nodeVersion":"12.20.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-dNwmx5hcjpJC899qXvp38PXXm6hROS+pkQLJGzz5qU0TMxfSklsHZXvjsl+vtoMql5nzQXQ/uIOjkPM/R2F56w==","shasum":"78caecc98a6db4e69a15f9a330024d948c785274","tarball":"https://registry.npmjs.org/@aaronpowell/react-foldable/-/react-foldable-0.2.1.tgz","fileCount":12,"unpackedSize":10637,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9UmaCRA9TVsSAnZWagAAXxkP/ju8K09Tp1XHG1lHIuY6\n8Sl00GlmQ8wv5YRz64w45PHmndrR/qEcgM1b3IF0tyo5fkEI5tIBxfknWApA\notXaR+KZJfYJfHxOWnss6OIL0G18/v7CDH7l+yvBhqMiqlPNIqDpq2ICVi9w\nOcaayvHMVc3r1A6+vwQ043QOPlaSwnjgSQFk5KQ6VVoyCqIopuSIkOgIVblY\nix1R6FFbkGfTVu4EUYcU0mpjY45pY8MgH09KC7KKwztvQ3J/hOdHKT0qZI7H\nKFkuPJDJCKE0iIQmN7FXkLxXj7nZNaVUDBPEgNlFVC37GoAJD5BP5PwKTHSC\nONxEqhG5l67PVJo64TBTG+lJhI7d654iAXauPd5xXpMA7XomhNuvo7H6ewwI\nLwEF4wHds0bFl8/v3rWphdyUEMkAqwLenVEFe30NtrA8VkAV3u82APRDsdBV\ngF8f4+j4tnUoUOUwwhdi72hnPMDiN/+zLCCkbZx7BOPAh7g7GB0fFYgxjinh\nXESbyNyi2Q2Bfw9b1ZwhUtBfJ6D+s8qvRL7RNWoF3jZR5PpC7vA9mqfVX2FA\nB7aN0cTE0qnHBvubKZzyDcUYc1C0JWBs9A8CwPQhsGrv9Ma9O7bLc8wFPgYL\nNCLeXlTRZUhpvuiy+IJL9MYLh0EAV0cg08nTGSVDT/X1EtOscWmeVCs6PdWt\n/1if\r\n=n03k\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIBLSxLVtblKEgO6hd5ae+OO0pQT4pROriCG7CJvcvTv1AiEAsauR7H77Zkjfw0BB8ipKnFXLMAn5q+DR0mVRw1Ds03A="}]},"_npmUser":{"name":"aaronpowell","email":"me@aaron-powell.com"},"directories":{},"maintainers":[{"name":"aaronpowell","email":"me@aaron-powell.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-foldable_0.2.1_1609910682101_0.7595228299532466"},"_hasShrinkwrap":false},"0.2.2":{"name":"@aaronpowell/react-foldable","version":"0.2.2","description":"React Foldable is a set of components that helps you work with multi-screen and foldable displays","main":"build/index.js","types":"build/index.d.ts","scripts":{"build":"tsc","watch":"tsc --watch","lint":"eslint src/**/*.ts","lint:fix":"npm run lint -- --fix"},"keywords":["react","surface-duo","dual-screen"],"author":{"name":"Aaron Powell","email":"me+github@aaron-powell.com","url":"https://www.aaron-powell.com"},"license":"MIT","devDependencies":{"@types/react":"^16.9.49","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^4.1.0","@typescript-eslint/parser":"^4.1.0","eslint":"^7.8.1","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","husky":"^4.3.0","prettier":"^2.1.1","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1"},"repository":{"type":"git","url":"git+https://github.com/aaronpowell/react-foldable.git"},"bugs":{"url":"https://github.com/aaronpowell/react-foldable/issues"},"homepage":"https://github.com/aaronpowell/react-foldable","husky":{"hooks":{"pre-commit":"npm run lint"}},"_id":"@aaronpowell/react-foldable@0.2.2","_nodeVersion":"12.20.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-vW2Ns4Z6p4CxBQtX7OPRr2QI6OtxRzA2oBWQb/fjuY4GCrjKWgLcx1+HxJvR6BURWfZ2iNhq7u1jQohPgaH73Q==","shasum":"f58887a0992714124c5e1396800ee0654a5517aa","tarball":"https://registry.npmjs.org/@aaronpowell/react-foldable/-/react-foldable-0.2.2.tgz","fileCount":48,"unpackedSize":29905,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9lJHCRA9TVsSAnZWagAAsTMP/33oLstROcUTC7ETGAWR\nAyguVbfqowXm2U66UscxgQemPkutCEToWHPCDWn5Nd0LWrJjiy01dTyepyjQ\nRZ32W2BUTy7y88b8b6cInStwUJXGZ90SgVns9eRHEoxUWra93uMbZ0lov1c1\ndf4igNgMtrlFN1luD55G+udP3LhnRwUW2T9OOL2Hl3Vgs8yy3N+FMRKIaMyG\nPPW92nItmbKrJ0Bo+SqwnKieQeb8JL5qZaDwf5QX0xoY2PL/JNww7jbxMXgt\nGS+MwVse0dPpf4HT+xNeY7qHHribZ6y4xynvyLnwpqSoHZH5JiPGn8csYVs2\n9bJopwLz1czDH7aVougUL3VbEB6RpXyQMa/Z3SgnNBA8GQf78hTHnk6mzgy2\nD40wCuSLpC849dgx35foeAtxzMa6z0nZjws28rbAiVtv+bdyvbYatuWcnWcH\nYMFpDc9jXRRKUzIffwrcmaE6fVra22RNWNKY2MHzwaNho6oFLQaKHgoDL6bC\nymx7ZQAkXfj4Eyv8Ri2XfB3CbVf9BoHgAv/L2yv+rCZ7+ofrQdwa4DPAwnrU\nOV1UOCdZop938r0HIBwMuBl83TsGST8CSV0l3p6ukAyrzBGjVPPlfpQYIgdA\nnwtpRvRmnJ7205+lSzzcLnxzW3ah8PHC87YsV1BtNPBOwW/5PBbvQXT48eXt\nD+SY\r\n=d2Aa\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDWR5mX6VaLyR9Xy6t/LmrN4YtzDJObZyPlkuFbOgs+QwIhAM4tw65tUkHVlFYr0z40DsjW1IDAGKQ06dSYrDqmvLgX"}]},"_npmUser":{"name":"aaronpowell","email":"me@aaron-powell.com"},"directories":{},"maintainers":[{"name":"aaronpowell","email":"me@aaron-powell.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-foldable_0.2.2_1609978439393_0.3945757458618542"},"_hasShrinkwrap":false},"0.3.0":{"name":"@aaronpowell/react-foldable","version":"0.3.0","description":"React Foldable is a set of components that helps you work with multi-screen and foldable displays","main":"build/index.js","types":"build/index.d.ts","scripts":{"build":"tsc","watch":"tsc --watch","lint":"eslint src/**/*.ts","lint:fix":"npm run lint -- --fix"},"keywords":["react","surface-duo","dual-screen"],"author":{"name":"Aaron Powell","email":"me+github@aaron-powell.com","url":"https://www.aaron-powell.com"},"license":"MIT","devDependencies":{"@types/react":"^16.9.49","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^4.1.0","@typescript-eslint/parser":"^4.1.0","eslint":"^7.8.1","eslint-config-prettier":"^6.11.0","eslint-plugin-prettier":"^3.1.4","eslint-plugin-react":"^7.20.6","husky":"^4.3.0","prettier":"^2.1.1","typescript":"^4.0.2"},"peerDependencies":{"react":"^16.13.1","react-dom":"^16.13.1"},"repository":{"type":"git","url":"git+https://github.com/aaronpowell/react-foldable.git"},"bugs":{"url":"https://github.com/aaronpowell/react-foldable/issues"},"homepage":"https://github.com/aaronpowell/react-foldable","husky":{"hooks":{"pre-commit":"npm run lint"}},"_resolved":"","_integrity":"","_from":"file:aaronpowell-react-foldable-0.3.0.tgz","_id":"@aaronpowell/react-foldable@0.3.0","_nodeVersion":"14.15.4","_npmVersion":"6.14.10","dist":{"integrity":"sha512-2FAU7RqN1e4lfJE847TTNEGHUhBPiYbggRp4hcl0vP9bkY356ER3+ZbZY+y0wcy1uGAdZAApvtd42lr18bUBOw==","shasum":"83958821eb352390678f9d37da5b8238fb7a7181","tarball":"https://registry.npmjs.org/@aaronpowell/react-foldable/-/react-foldable-0.3.0.tgz","fileCount":48,"unpackedSize":31115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgARy8CRA9TVsSAnZWagAAhL8P/31q55Ujg/nTpzzZKdNT\nPDXiEFRCaz3oPSTV79HLhRC3nYgrE3nOuB+EB60qq2080Ma2K9Cvfu6BmPXE\nHxZt2YlSz91qJOqBuN4bD0SzkwoqMECT88WZkksBZ9QDzJ2K3XmzcSHrPD4p\n4lL89tVAXJ1MNhmvddi6wzvX1+gWcFXHJGl8VBAJoXAQaxvc7pipAWWRMzAc\n+gBXf44wnsLgqDOPSDhoETM4Z65qw/Ndld3/Q+UMZ/TCHQIZnf1x8XmaZLby\nAUiX30QZ0z6EJfc0nYuGTWlkiRKFUbVnm/tyRrlhQ2M2Rg67WI6X8ZN1AGTz\noiVyPJsa2dYf2RQJ5zY18owxlI2grmom8SuGTEmlBsmuYBkXC7nPj9LR+lHZ\ny5Lw74LrK5TLxNkGxiTfitBadV3MV56FUbE0mg2U0OklCYHd9jLxgyEp/jPb\neAnJOe4VJWfKWqKunrMklzDL7NtBDtJ4oy7w5o+DHh1a3Xk60ijXfnNWcVd7\n1bx3i+yQwClB6xoIIjGectQ4JEbsiy4YrlFsl69OInBPg1yZa9pFJO2TcVU2\niDFyYOubH/0FaQMhrlnUDkZbcUoYMtyTztn4CNXGhcowRD876LdX2hJeqd5N\n/rvmD8c/A6EB3C+YihO0vmgmQLb5MtCJrJ1CD71EkIYKpSTsbQ20vQ/SMNhc\nMUKH\r\n=3dJV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCZaxn++OSnhJqXTLl13r1enCk+5DBQLztuhuizZNzv+QIhAL6Q1OqZEIuWt2A36xGQQzBubDYAhtkg/RfVH4TUEFSW"}]},"_npmUser":{"name":"aaronpowell","email":"me@aaron-powell.com"},"directories":{},"maintainers":[{"name":"aaronpowell","email":"me@aaron-powell.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-foldable_0.3.0_1610685627570_0.4450462774426005"},"_hasShrinkwrap":false}},"time":{"created":"2021-01-06T05:24:42.046Z","0.2.1":"2021-01-06T05:24:42.256Z","modified":"2022-04-04T10:55:45.401Z","0.2.2":"2021-01-07T00:13:59.508Z","0.3.0":"2021-01-15T04:40:27.701Z"},"maintainers":[{"name":"aaronpowell","email":"me@aaron-powell.com"}],"description":"React Foldable is a set of components that helps you work with multi-screen and foldable displays","homepage":"https://github.com/aaronpowell/react-foldable","keywords":["react","surface-duo","dual-screen"],"repository":{"type":"git","url":"git+https://github.com/aaronpowell/react-foldable.git"},"author":{"name":"Aaron Powell","email":"me+github@aaron-powell.com","url":"https://www.aaron-powell.com"},"bugs":{"url":"https://github.com/aaronpowell/react-foldable/issues"},"license":"MIT","readme":"# React-Foldable\n\nReact-Foldable is a set of components and React hooks that make it easier to work with foldable displays, such as the [Surface Duo](https://docs.microsoft.com/dual-screen/web/?WT.mc_id=reactfoldable-github-aapowell).\n\n## Usage\n\nThere are two core components, `Foldable` and `FoldableScreen`.\n\n### ``\n\n```jsx\n...\n```\n\nThis component is intended to enclose a whole application, or the whole of the application that needs to be foldable-aware. It contains the logic to connect with all the media queries and JavaScript APIs then expose that information via a React context.\n\n### ``\n\n```jsx\n\n \n \n\n```\n\nThis component will determine whether or not to show the `component` provided, depending on whether the `matchScreen` number matches a visible screen.\n\n### Hooks\n\nThere are four hooks available. Note: with the exception of the context hook, you don't need to be within a `` component to use these hooks.\n\n#### `useDualScreen`\n\nThis returns a boolean value that indicates whether the display is in dual-screen mode or not.\n\n#### `useScreenSpanning`\n\nThis returns the span mode for the current display, using the TypeScript enum `ScreenSpanning`:\n\n```typescript\nenum ScreenSpanning {\n Vertical = \"single-fold-vertical\",\n Horizontal = \"single-fold-horizontal\",\n Unknown = \"unknown\",\n}\n```\n\nThe value of `unknown` is used if the device is not a foldable, or not in foldable mode.\n\n#### `useWindowSegments`\n\nThis returns an array of `DOMRect` that contains the dimensions of the visible screens. In a non-foldable device, it will have one element, in a foldable/multi-screen device, it will return an item for each screen, counting from top-left.\n\n#### `useFoldableContext`\n\nThis provides access to the React context that exposes the information from each of the hooks, should you prefer to access it via context rather than the hooks directly.\n\n## License\n\n[MIT](../License.md)\n","readmeFilename":"README.md"}