{"_id":"@blocdigital/usetoplayerelement","_rev":"5-30217dd6355ec17053de1f5822820e68","name":"@blocdigital/usetoplayerelement","dist-tags":{"latest":"0.0.5"},"versions":{"0.0.1":{"name":"@blocdigital/usetoplayerelement","version":"0.0.1","keywords":["react","react","hooks","top","layer","modal","dialog","popover"],"author":{"name":"Bloc Digital","email":"web@bloc.digital"},"license":"MIT","_id":"@blocdigital/usetoplayerelement@0.0.1","maintainers":[{"name":"hwickham","email":"harrywickham9876@gmail.com"},{"name":"link2twenty","email":"AndrewB05@gmail.com"},{"name":"acol","email":"acol248@gmail.com"},{"name":"nadakbar","email":"nadeem.akbar@bloc.digital"}],"homepage":"https://github.com/bloc-digital/usetoplayerelement#readme","bugs":{"url":"https://github.com/bloc-digital/usetoplayerelement/issues"},"dist":{"shasum":"273998ff6854dd4baad3a2771f37cba72800c4cf","tarball":"https://registry.npmjs.org/@blocdigital/usetoplayerelement/-/usetoplayerelement-0.0.1.tgz","fileCount":9,"integrity":"sha512-5XX+h1uWq7Es3McKovY41dVg8QtUJMEbP3bJ8BE1YE3pkA8F87GCPxqg7+5dsl4AC5Jvdq4bbrEQGZDdO60c0Q==","signatures":[{"sig":"MEUCIQDQmzih0WKX9IkePr1gr+fasI8w7CbM5yMEtGkOWBNm2gIgUL7d+teXcKLgAsndtml8XeepP3LTZTIZtD8ioaejvBg=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11208},"jest":{"testEnvironment":"jsdom"},"main":"dist/cjs/index.js","type":"module","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"}},"./package.json":"./package.json"},"gitHead":"1afa74d144a82918dc31bbe924426760e2ac9a4a","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"jest","build":"tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && tsc -p tsconfig-types.json","preview":"vite preview"},"_npmUser":{"name":"link2twenty","email":"AndrewB05@gmail.com"},"repository":{"url":"git+https://github.com/bloc-digital/usetoplayerelement.git","type":"git"},"_npmVersion":"11.0.0","description":"React hook for monitoring the top layer","directories":{},"_nodeVersion":"20.18.3","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","vite":"^6.1.0","eslint":"^9.20.1","prettier":"^3.5.1","babel-jest":"^29.7.0","typescript":"^5.7.3","@babel/core":"^7.26.9","@types/jest":"^29.5.14","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","@babel/preset-env":"^7.26.9","eslint-plugin-react":"^7.37.4","@testing-library/react":"^16.2.0","eslint-config-prettier":"^10.0.1","eslint-plugin-prettier":"^5.2.3","jest-environment-jsdom":"^29.7.0","@babel/preset-typescript":"^7.26.0","@vitejs/plugin-react-swc":"^3.8.0","@typescript-eslint/parser":"^8.24.1","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19","@typescript-eslint/eslint-plugin":"^8.24.1"},"_npmOperationalInternal":{"tmp":"tmp/usetoplayerelement_0.0.1_1739884330475_0.36099528505397305","host":"s3://npm-registry-packages-npm-production"}},"0.0.2":{"name":"@blocdigital/usetoplayerelement","version":"0.0.2","keywords":["react","react","hooks","top","layer","modal","dialog","popover"],"author":{"name":"Bloc Digital","email":"web@bloc.digital"},"license":"MIT","_id":"@blocdigital/usetoplayerelement@0.0.2","maintainers":[{"name":"hwickham","email":"harrywickham9876@gmail.com"},{"name":"link2twenty","email":"AndrewB05@gmail.com"},{"name":"acol","email":"acol248@gmail.com"},{"name":"nadakbar","email":"nadeem.akbar@bloc.digital"}],"homepage":"https://github.com/bloc-digital/usetoplayerelement#readme","bugs":{"url":"https://github.com/bloc-digital/usetoplayerelement/issues"},"dist":{"shasum":"09e74cee485e54584032ddc1f29c13b42c6bedef","tarball":"https://registry.npmjs.org/@blocdigital/usetoplayerelement/-/usetoplayerelement-0.0.2.tgz","fileCount":9,"integrity":"sha512-P5As7fa8EZTWY3OA6nEgIfynkh+bT7OMHvfuGhyia4bE6ZtzXP6678G2dH+PjVCNr+qTC7o9SLVWRGQyw/kcHA==","signatures":[{"sig":"MEYCIQC7XIBegAiagSeTu511YH2CSh2OpAp02IW94qKfaydMWAIhAPjiVCYM6c6LGSQn6yAkt+QmWNu3reS3rSR46wpYKkwg","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11296},"jest":{"testEnvironment":"jsdom"},"main":"dist/cjs/index.js","type":"module","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"}},"./package.json":"./package.json"},"gitHead":"8dfcfc21da3c61525094db4c9dc062f641ebec85","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"jest","build":"tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && tsc -p tsconfig-types.json","preview":"vite preview"},"_npmUser":{"name":"link2twenty","email":"AndrewB05@gmail.com"},"repository":{"url":"git+https://github.com/bloc-digital/usetoplayerelement.git","type":"git"},"_npmVersion":"11.0.0","description":"React hook for monitoring the top layer","directories":{},"_nodeVersion":"20.18.3","dependencies":{"react":"^19.0.0","react-dom":"^19.0.0"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^29.7.0","vite":"^6.2.0","eslint":"^9.21.0","globals":"^16.0.0","prettier":"^3.5.2","babel-jest":"^29.7.0","typescript":"^5.7.3","@babel/core":"^7.26.9","@types/jest":"^29.5.14","@types/react":"^19.0.10","@types/react-dom":"^19.0.4","@babel/preset-env":"^7.26.9","@testing-library/react":"^16.2.0","eslint-config-prettier":"^10.0.2","eslint-plugin-prettier":"^5.2.3","jest-environment-jsdom":"^29.7.0","@babel/preset-typescript":"^7.26.0","@vitejs/plugin-react-swc":"^3.8.0","@typescript-eslint/parser":"^8.25.0","eslint-plugin-react-hooks":"^5.1.0","eslint-plugin-react-refresh":"^0.4.19","@typescript-eslint/eslint-plugin":"^8.25.0"},"peerDependencies":{"react":"^17 || ^18 || ^19","react-dom":"^17 || ^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/usetoplayerelement_0.0.2_1740737808709_0.3527025194616462","host":"s3://npm-registry-packages-npm-production"}},"0.0.3":{"name":"@blocdigital/usetoplayerelement","version":"0.0.3","keywords":["react","react","hooks","top","layer","modal","dialog","popover"],"author":{"name":"Bloc Digital","email":"web@bloc.digital"},"license":"MIT","_id":"@blocdigital/usetoplayerelement@0.0.3","maintainers":[{"name":"hwickham","email":"harrywickham9876@gmail.com"},{"name":"link2twenty","email":"AndrewB05@gmail.com"},{"name":"acol","email":"acol248@gmail.com"},{"name":"nadakbar","email":"nadeem.akbar@bloc.digital"}],"homepage":"https://github.com/bloc-digital/usetoplayerelement#readme","bugs":{"url":"https://github.com/bloc-digital/usetoplayerelement/issues"},"dist":{"shasum":"c0839a41d8746b25636fce10c29425f7f954780d","tarball":"https://registry.npmjs.org/@blocdigital/usetoplayerelement/-/usetoplayerelement-0.0.3.tgz","fileCount":9,"integrity":"sha512-Hss7PPm29cxWoiSxeKQvyO+MQHFgncgi4g6CzpuMsjCHdzc/uHCtYQ5TNGtRrMHhh3gJImQIvr3b4/B7VE9aZw==","signatures":[{"sig":"MEUCIQDBjf7MO1LMJuYncPMyEKwRmx8wQXF078F32oFyGTgEDwIgBexfYYmw782WtY15RYHB2Xo9UcjiDZwif9ToBxVw47w=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":11247},"jest":{"testEnvironment":"jsdom"},"main":"dist/cjs/index.js","type":"module","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"}},"./package.json":"./package.json"},"gitHead":"8e1c48c832337eb249342fd843e98ec2260f01a0","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"jest","build":"tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && tsc -p tsconfig-types.json","preview":"vite preview"},"_npmUser":{"name":"link2twenty","actor":{"name":"link2twenty","type":"user","email":"AndrewB05@gmail.com"},"email":"AndrewB05@gmail.com"},"repository":{"url":"git+https://github.com/bloc-digital/usetoplayerelement.git","type":"git"},"_npmVersion":"11.4.2","description":"React hook for monitoring the top layer","directories":{},"_nodeVersion":"22.17.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^30.0.4","vite":"^7.0.2","eslint":"^9.30.1","globals":"^16.3.0","prettier":"^3.6.2","babel-jest":"^30.0.4","typescript":"^5.8.3","@babel/core":"^7.28.0","@types/jest":"^30.0.0","@types/react":"^19.1.8","@types/react-dom":"^19.1.6","@babel/preset-env":"^7.28.0","@testing-library/react":"^16.3.0","eslint-config-prettier":"^10.1.5","eslint-plugin-prettier":"^5.5.1","jest-environment-jsdom":"^30.0.4","@babel/preset-typescript":"^7.27.1","@vitejs/plugin-react-swc":"^3.10.2","@typescript-eslint/parser":"^8.35.1","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","@typescript-eslint/eslint-plugin":"^8.35.1"},"peerDependencies":{"react":"^17 || ^18 || ^19","react-dom":"^17 || ^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/usetoplayerelement_0.0.3_1751637453491_0.5629703513862059","host":"s3://npm-registry-packages-npm-production"}},"0.0.4":{"name":"@blocdigital/usetoplayerelement","version":"0.0.4","keywords":["react","react","hooks","top","layer","modal","dialog","popover"],"author":{"name":"Bloc Digital","email":"web@bloc.digital"},"license":"MIT","_id":"@blocdigital/usetoplayerelement@0.0.4","maintainers":[{"name":"hwickham","email":"harrywickham9876@gmail.com"},{"name":"link2twenty","email":"AndrewB05@gmail.com"},{"name":"acol","email":"acol248@gmail.com"},{"name":"nadakbar","email":"nadeem.akbar@bloc.digital"}],"homepage":"https://github.com/bloc-digital/usetoplayerelement#readme","bugs":{"url":"https://github.com/bloc-digital/usetoplayerelement/issues"},"dist":{"shasum":"190b6ebc024802ccad661cf17b2aba59355e365e","tarball":"https://registry.npmjs.org/@blocdigital/usetoplayerelement/-/usetoplayerelement-0.0.4.tgz","fileCount":9,"integrity":"sha512-uasjr+cCB0Qf1Ts7TUgCBLoYlTOe6AYSEI/jMdGiS/PWlVSfybShr8zei/+jKer1PHW9sES0cx+pflni1l6IrQ==","signatures":[{"sig":"MEUCICXpFX3lg0N81yUit6AE9oKbJ/rU/H3LPHR+5q4GksBOAiEAvYfUr/sc2t1l1X9SuybcPgb6HMBqkDCsKcW9QGY0Rd0=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16485},"jest":{"testEnvironment":"jsdom"},"main":"dist/cjs/index.js","type":"module","types":"dist/types/index.d.ts","module":"dist/esm/index.js","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"}},"./package.json":"./package.json"},"gitHead":"55cce7f2c751e5faa3fb2c589b73484908fde35a","scripts":{"dev":"vite","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","test":"jest","build":"tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && tsc -p tsconfig-types.json","preview":"vite preview"},"_npmUser":{"name":"link2twenty","email":"AndrewB05@gmail.com"},"repository":{"url":"git+https://github.com/bloc-digital/usetoplayerelement.git","type":"git"},"_npmVersion":"11.4.2","description":"React hook for monitoring the top layer","directories":{},"_nodeVersion":"22.18.0","_hasShrinkwrap":false,"devDependencies":{"jest":"^30.0.5","vite":"^7.1.3","eslint":"^9.34.0","globals":"^16.3.0","prettier":"^3.6.2","babel-jest":"^30.0.5","typescript":"^5.9.2","@babel/core":"^7.28.3","@types/jest":"^30.0.0","@types/react":"^19.1.11","@types/react-dom":"^19.1.8","@babel/preset-env":"^7.28.3","@testing-library/react":"^16.3.0","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","jest-environment-jsdom":"^30.0.5","@babel/preset-typescript":"^7.27.1","@vitejs/plugin-react-swc":"^4.0.1","@typescript-eslint/parser":"^8.41.0","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.20","@typescript-eslint/eslint-plugin":"^8.41.0"},"peerDependencies":{"react":"^17 || ^18 || ^19","react-dom":"^17 || ^18 || ^19"},"_npmOperationalInternal":{"tmp":"tmp/usetoplayerelement_0.0.4_1756216437313_0.11378835800466547","host":"s3://npm-registry-packages-npm-production"}},"0.0.5":{"name":"@blocdigital/usetoplayerelement","type":"module","version":"0.0.5","description":"React hook for monitoring the top layer","author":{"name":"Bloc Digital","email":"web@bloc.digital"},"license":"MIT","keywords":["react","react","hooks","top","layer","modal","dialog","popover"],"repository":{"type":"git","url":"git+https://github.com/bloc-digital/usetoplayerelement.git"},"homepage":"https://github.com/bloc-digital/usetoplayerelement#readme","jest":{"testEnvironment":"jsdom"},"types":"dist/types/index.d.ts","main":"dist/cjs/index.js","module":"dist/esm/index.js","exports":{".":{"import":{"types":"./dist/types/index.d.ts","default":"./dist/esm/index.js"},"require":{"types":"./dist/types/index.d.ts","default":"./dist/cjs/index.js"}},"./package.json":"./package.json"},"scripts":{"dev":"vite","build":"tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && tsc -p tsconfig-types.json","lint":"eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0","preview":"vite preview","test":"jest"},"devDependencies":{"@babel/core":"^7.28.4","@babel/preset-env":"^7.28.3","@babel/preset-typescript":"^7.27.1","@testing-library/react":"^16.3.0","@types/jest":"^30.0.0","@types/react":"^19.1.13","@types/react-dom":"^19.1.9","@typescript-eslint/eslint-plugin":"^8.44.1","@typescript-eslint/parser":"^8.44.1","@vitejs/plugin-react-swc":"^4.1.0","babel-jest":"^30.1.2","eslint":"^9.36.0","eslint-config-prettier":"^10.1.8","eslint-plugin-prettier":"^5.5.4","eslint-plugin-react-hooks":"^5.2.0","eslint-plugin-react-refresh":"^0.4.21","globals":"^16.4.0","jest":"^30.1.3","jest-environment-jsdom":"^30.1.2","prettier":"^3.6.2","typescript":"^5.9.2","vite":"^7.1.7"},"bugs":{"url":"https://github.com/bloc-digital/usetoplayerelement/issues"},"peerDependencies":{"react":"^17 || ^18 || ^19","react-dom":"^17 || ^18 || ^19"},"_id":"@blocdigital/usetoplayerelement@0.0.5","gitHead":"3ca3f358ad3b5cc6f3b6b0701c4cd9c336c1d0da","_nodeVersion":"22.19.0","_npmVersion":"11.4.2","dist":{"integrity":"sha512-XfyA+KYLk/aKq+pgiiAMI7yfKTryuG2pSzEzYlERWCUP4p19BvT4Hd8E/6v5NsDQ21USOOpkj96csW+5wNoRyA==","shasum":"48c001e666ea93e01a8889febd3339ef7233e51a","tarball":"https://registry.npmjs.org/@blocdigital/usetoplayerelement/-/usetoplayerelement-0.0.5.tgz","fileCount":9,"unpackedSize":16503,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQCfTL6aqvZ/KiL2H9Zov5g2G0ejTpxyGYsms+7zenk/mgIgFwbQcmM4j3juF/R/VATgFst7A1SdIgBmegXmTHqQ/wc="}]},"_npmUser":{"name":"link2twenty","email":"AndrewB05@gmail.com"},"directories":{},"maintainers":[{"name":"hwickham","email":"harrywickham9876@gmail.com"},{"name":"link2twenty","email":"AndrewB05@gmail.com"},{"name":"acol","email":"acol248@gmail.com"},{"name":"nadakbar","email":"nadeem.akbar@bloc.digital"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/usetoplayerelement_0.0.5_1758615204825_0.37245476885884865"},"_hasShrinkwrap":false}},"time":{"created":"2025-02-18T13:12:10.405Z","modified":"2025-09-23T08:13:25.198Z","0.0.1":"2025-02-18T13:12:10.647Z","0.0.2":"2025-02-28T10:16:48.876Z","0.0.3":"2025-07-04T13:57:33.695Z","0.0.4":"2025-08-26T13:53:57.500Z","0.0.5":"2025-09-23T08:13:24.998Z"},"bugs":{"url":"https://github.com/bloc-digital/usetoplayerelement/issues"},"author":{"name":"Bloc Digital","email":"web@bloc.digital"},"license":"MIT","homepage":"https://github.com/bloc-digital/usetoplayerelement#readme","keywords":["react","react","hooks","top","layer","modal","dialog","popover"],"repository":{"type":"git","url":"git+https://github.com/bloc-digital/usetoplayerelement.git"},"description":"React hook for monitoring the top layer","maintainers":[{"name":"hwickham","email":"harrywickham9876@gmail.com"},{"name":"link2twenty","email":"AndrewB05@gmail.com"},{"name":"acol","email":"acol248@gmail.com"},{"name":"nadakbar","email":"nadeem.akbar@bloc.digital"}],"readme":"# @blocdigital/usetoplayerelement\n\n> React hook for monitoring the top layer.\n\n## Install\n\n```bash\nnpm install --save @blocdigital/usetoplayerelement\n```\n\n## Usage\n\n### Hook usage\n\n```tsx\nimport { useEffect, createPortal } from 'react';\n\n// Hooks\nimport useTopLayerElement from '@blocdigital/usetoplayerelement';\n\nexport default function GreatContent({ show = false, className, children }) {\n  // Get the full list of elements in the top layer\n  const { topLayerList } = useTopLayerElement();\n\n  // If there is anything in the top layer prevent scrolling\n  return <SomeComponent preventScroll={Boolean(topLayerList.length)} />;\n}\n```\n\nExample for moving popover element so it is always interactable and on top  \n_**Warning:** It's possible to get caught in an infinite loop if multiple elements are fighting for the top spot._\n\n```tsx\nimport { useEffect } from 'react';\nimport { createPortal } from 'react-dom';\n\n// Hooks\nimport useTopLayerElement from '@blocdigital/usetoplayerelement';\n\nexport default function GreatContent({ show = false, children }) {\n  // We get a ref from useTopLayerElement to do specific checks\n  const { ref, isTopElement, topDialog } = useTopLayerElement();\n\n  // Handle show/hide popover\n  useEffect(() => {\n    const { current: el } = ref;\n\n    if (!el) return;\n\n    show ? el.showPopover() : el.hidePopover();\n  }, [show]);\n\n  // Keep element on top\n  useEffect(() => {\n    const { current: el } = ref;\n\n    if (!el || !show || isTopElement) return;\n\n    // Move the popover back on top\n    el.hidePopover();\n    el.showPopover();\n  }, [show, isTopElement]);\n\n  return createPortal(\n    <div ref={ref} popover=\"manual\">\n      {children}\n    </div>,\n    topDialog || document.body,\n  );\n}\n```\n\n#### Event\n\nAs an added bonus a `topLayer` event is now fired, you can listen for it on the document and it will tell you which element has entered or left the top layer provided the element is still in the dom. If the element is no longer in the dom the target will be document.\n","readmeFilename":"README.md"}