{"_id":"use-isomorphic-layout-effect","_rev":"4337277","name":"use-isomorphic-layout-effect","description":"A React helper hook for scheduling a layout effect with a fallback to a regular effect for environments where layout effects should not be used (such as server-side rendering).","dist-tags":{"latest":"1.2.1"},"maintainers":[{"name":"andarist","email":""}],"time":{"modified":"2026-04-08T09:54:56.000Z","created":"2020-06-30T13:40:09.571Z","1.2.1":"2025-05-16T21:58:14.383Z","1.2.0":"2024-12-06T11:33:28.315Z","1.1.2":"2022-03-30T08:21:04.084Z","1.1.1":"2020-12-19T21:11:43.174Z","1.1.0":"2020-10-26T10:05:07.075Z","1.0.0":"2020-06-30T13:40:09.571Z"},"users":{},"repository":{"type":"git","url":"git+https://github.com/Andarist/use-isomorphic-layout-effect.git"},"versions":{"1.2.1":{"name":"use-isomorphic-layout-effect","version":"1.2.1","description":"A React helper hook for scheduling a layout effect with a fallback to a regular effect for environments where layout effects should not be used (such as server-side rendering).","main":"dist/use-isomorphic-layout-effect.cjs.js","module":"dist/use-isomorphic-layout-effect.esm.js","react-native":"./dist/use-isomorphic-layout-effect.browser.esm.js","browser":{"./dist/use-isomorphic-layout-effect.esm.js":"./dist/use-isomorphic-layout-effect.browser.esm.js"},"types":"./dist/use-isomorphic-layout-effect.cjs.d.ts","exports":{".":{"types":{"import":"./dist/use-isomorphic-layout-effect.cjs.mjs","default":"./dist/use-isomorphic-layout-effect.cjs.js"},"browser":{"module":"./dist/use-isomorphic-layout-effect.browser.esm.js","import":"./dist/use-isomorphic-layout-effect.browser.cjs.mjs","default":"./dist/use-isomorphic-layout-effect.browser.cjs.js"},"react-native":{"module":"./dist/use-isomorphic-layout-effect.browser.esm.js","import":"./dist/use-isomorphic-layout-effect.browser.cjs.mjs","default":"./dist/use-isomorphic-layout-effect.browser.cjs.js"},"module":"./dist/use-isomorphic-layout-effect.esm.js","import":"./dist/use-isomorphic-layout-effect.cjs.mjs","default":"./dist/use-isomorphic-layout-effect.cjs.js"},"./package.json":"./package.json"},"imports":{"#is-client":{"react-native":"./src/conditions/true.ts","browser":"./src/conditions/true.ts","default":"./src/conditions/is-client.ts"}},"scripts":{"test":"echo \"Warning: no test specified\"","build":"preconstruct build","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/Andarist/use-isomorphic-layout-effect.git"},"license":"MIT","bugs":{"url":"https://github.com/Andarist/use-isomorphic-layout-effect/issues"},"homepage":"https://github.com/Andarist/use-isomorphic-layout-effect#readme","peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"@types/react":{"optional":true}},"devDependencies":{"@babel/core":"^7.26.0","@babel/preset-env":"^7.26.0","@babel/preset-typescript":"^7.26.0","@preconstruct/cli":"^2.8.10","@types/react":"^19.0.0","husky":"^9.1.7","lint-staged":"^10.2.11","prettier":"^3.4.2","react":"^19.0.0","typescript":"^5.7.2"},"preconstruct":{"exports":{"importConditionDefaultExport":"default"},"___experimentalFlags_WILL_CHANGE_IN_PATCH":{"importsConditions":true}},"packageManager":"pnpm@10.11.0+sha512.6540583f41cc5f628eb3d9773ecee802f4f9ef9923cc45b69890fb47991d4b092964694ec3a4f738a420c918a333062c8b925d312f42e4f0c263eb603551f977","_id":"use-isomorphic-layout-effect@1.2.1","gitHead":"711b17523cce55ec5ecb64500c8234fe8f8a046b","_nodeVersion":"18.20.3","_npmVersion":"10.7.0","dist":{"shasum":"2f11a525628f56424521c748feabc2ffcc962fce","size":2864,"noattachment":false,"key":"/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/use-isomorphic-layout-effect/download/use-isomorphic-layout-effect-1.2.1.tgz"},"_npmUser":{"name":"andarist","email":"mateuszburzynski@gmail.com"},"directories":{},"maintainers":[{"name":"andarist","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/use-isomorphic-layout-effect_1.2.1_1747432694221_0.523853238426254"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2025-05-16T21:58:14.383Z","publish_time":1747432694383,"_source_registry_name":"default","_cnpm_publish_time":1747432694383},"1.2.0":{"name":"use-isomorphic-layout-effect","version":"1.2.0","description":"A React helper hook for scheduling a layout effect with a fallback to a regular effect for environments where layout effects should not be used (such as server-side rendering).","main":"dist/use-isomorphic-layout-effect.cjs.js","module":"dist/use-isomorphic-layout-effect.esm.js","react-native":"./dist/use-isomorphic-layout-effect.browser.esm.js","browser":{"./dist/use-isomorphic-layout-effect.esm.js":"./dist/use-isomorphic-layout-effect.browser.esm.js"},"types":"./dist/use-isomorphic-layout-effect.cjs.d.ts","exports":{".":{"types":{"import":"./dist/use-isomorphic-layout-effect.cjs.mjs","default":"./dist/use-isomorphic-layout-effect.cjs.js"},"browser":{"module":"./dist/use-isomorphic-layout-effect.browser.esm.js","import":"./dist/use-isomorphic-layout-effect.browser.cjs.mjs","default":"./dist/use-isomorphic-layout-effect.browser.cjs.js"},"react-native":{"module":"./dist/use-isomorphic-layout-effect.browser.esm.js","import":"./dist/use-isomorphic-layout-effect.browser.cjs.mjs","default":"./dist/use-isomorphic-layout-effect.browser.cjs.js"},"module":"./dist/use-isomorphic-layout-effect.esm.js","import":"./dist/use-isomorphic-layout-effect.cjs.mjs","default":"./dist/use-isomorphic-layout-effect.cjs.js"},"./package.json":"./package.json"},"imports":{"#is-client":{"react-native":"./src/conditions/true.ts","browser":"./src/conditions/true.ts","default":"./src/conditions/is-client.ts"}},"scripts":{"test":"echo \"Warning: no test specified\"","build":"preconstruct build","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/Andarist/use-isomorphic-layout-effect.git"},"license":"MIT","bugs":{"url":"https://github.com/Andarist/use-isomorphic-layout-effect/issues"},"homepage":"https://github.com/Andarist/use-isomorphic-layout-effect#readme","peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"},"peerDependenciesMeta":{"@types/react":{"optional":true}},"devDependencies":{"@babel/core":"^7.26.0","@babel/preset-env":"^7.26.0","@babel/preset-typescript":"^7.26.0","@preconstruct/cli":"^2.8.10","@types/react":"^19.0.0","cpy-cli":"^3.1.1","husky":"^4.2.5","lint-staged":"^10.2.11","prettier":"^3.4.2","react":"^19.0.0","typescript":"^5.7.2"},"preconstruct":{"exports":{"importConditionDefaultExport":"default"},"___experimentalFlags_WILL_CHANGE_IN_PATCH":{"importsConditions":true}},"_id":"use-isomorphic-layout-effect@1.2.0","gitHead":"22f43ee56bbb8f0686acd870b546530af5cb8f5d","_nodeVersion":"18.20.3","_npmVersion":"10.7.0","dist":{"shasum":"afb292eb284c39219e8cb8d3d62d71999361a21d","size":2724,"noattachment":false,"key":"/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/use-isomorphic-layout-effect/download/use-isomorphic-layout-effect-1.2.0.tgz"},"_npmUser":{"name":"andarist","email":"mateuszburzynski@gmail.com"},"directories":{},"maintainers":[{"name":"andarist","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-isomorphic-layout-effect_1.2.0_1733484808133_0.11654766321758525"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2024-12-06T11:33:28.315Z","publish_time":1733484808315,"_source_registry_name":"default","_cnpm_publish_time":1733484808315},"1.1.2":{"name":"use-isomorphic-layout-effect","version":"1.1.2","description":"A React helper hook for scheduling a layout effect with a fallback to a regular effect for environments where layout effects should not be used (such as server-side rendering).","main":"dist/use-isomorphic-layout-effect.cjs.js","module":"dist/use-isomorphic-layout-effect.esm.js","react-native":"./dist/use-isomorphic-layout-effect.native.esm.js","browser":{"./dist/use-isomorphic-layout-effect.cjs.js":"./dist/use-isomorphic-layout-effect.browser.cjs.js","./dist/use-isomorphic-layout-effect.esm.js":"./dist/use-isomorphic-layout-effect.browser.esm.js"},"scripts":{"test":"echo \"Warning: no test specified\"","build":"preconstruct build","postbuild":"cpy 'src/index.native.ts' . --rename=$npm_package_react_native","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/Andarist/use-isomorphic-layout-effect.git"},"license":"MIT","bugs":{"url":"https://github.com/Andarist/use-isomorphic-layout-effect/issues"},"homepage":"https://github.com/Andarist/use-isomorphic-layout-effect#readme","peerDependencies":{"react":"^16.8.0 || ^17.0.0 || ^18.0.0"},"peerDependenciesMeta":{"@types/react":{"optional":true}},"devDependencies":{"@babel/core":"^7.10.4","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.10.4","@preconstruct/cli":"1.1.14","@types/react":"^16.9.41","cpy-cli":"^3.1.1","husky":"^4.2.5","lint-staged":"^10.2.11","prettier":"^2.0.5","react":"^16.13.1","typescript":"^3.9.5"},"gitHead":"6fd8d7d1d56ab2af42d4a1d7c6cae9db2f1e6781","_id":"use-isomorphic-layout-effect@1.1.2","_nodeVersion":"12.22.11","_npmVersion":"6.14.16","dist":{"shasum":"497cefb13d863d687b08477d9e5a164ad8c1a6fb","size":2252,"noattachment":false,"key":"/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/use-isomorphic-layout-effect/download/use-isomorphic-layout-effect-1.1.2.tgz"},"_npmUser":{"name":"andarist","email":"mateuszburzynski@gmail.com"},"directories":{},"maintainers":[{"name":"andarist","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-isomorphic-layout-effect_1.1.2_1648628463952_0.8441504403090923"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-03-30T08:39:57.565Z","publish_time":1648628464084,"_cnpm_publish_time":1648628464084},"1.1.1":{"name":"use-isomorphic-layout-effect","version":"1.1.1","description":"A React helper hook for scheduling a layout effect with a fallback to a regular effect for environments where layout effects should not be used (such as server-side rendering).","main":"dist/use-isomorphic-layout-effect.cjs.js","module":"dist/use-isomorphic-layout-effect.esm.js","react-native":"./dist/use-isomorphic-layout-effect.native.esm.js","browser":{"./dist/use-isomorphic-layout-effect.cjs.js":"./dist/use-isomorphic-layout-effect.browser.cjs.js","./dist/use-isomorphic-layout-effect.esm.js":"./dist/use-isomorphic-layout-effect.browser.esm.js"},"scripts":{"test":"echo \"Warning: no test specified\"","build":"preconstruct build","postbuild":"cpy 'src/index.native.ts' . --rename=$npm_package_react_native","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/Andarist/use-isomorphic-layout-effect.git"},"license":"MIT","bugs":{"url":"https://github.com/Andarist/use-isomorphic-layout-effect/issues"},"homepage":"https://github.com/Andarist/use-isomorphic-layout-effect#readme","peerDependencies":{"react":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"@types/react":{"optional":true}},"devDependencies":{"@babel/core":"^7.10.4","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.10.4","@preconstruct/cli":"1.1.14","@types/react":"^16.9.41","cpy-cli":"^3.1.1","husky":"^4.2.5","lint-staged":"^10.2.11","prettier":"^2.0.5","react":"^16.13.1","typescript":"^3.9.5"},"gitHead":"ef76f1ecc3760bf84031df90d910db08d82d109c","_id":"use-isomorphic-layout-effect@1.1.1","_nodeVersion":"10.16.3","_npmVersion":"6.14.9","dist":{"shasum":"7bb6589170cd2987a152042f9084f9effb75c225","size":2104,"noattachment":false,"key":"/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/use-isomorphic-layout-effect/download/use-isomorphic-layout-effect-1.1.1.tgz"},"_npmUser":{"name":"andarist","email":"mateuszburzynski@gmail.com"},"directories":{},"maintainers":[{"name":"andarist","email":""}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-isomorphic-layout-effect_1.1.1_1608412303014_0.4816584106346875"},"_hasShrinkwrap":false,"publish_time":1608412303174,"_cnpm_publish_time":1608412303174},"1.1.0":{"name":"use-isomorphic-layout-effect","version":"1.1.0","description":"A React helper hook for scheduling a layout effect with a fallback to a regular effect for environments where layout effects should not be used (such as server-side rendering).","main":"dist/use-isomorphic-layout-effect.cjs.js","module":"dist/use-isomorphic-layout-effect.esm.js","react-native":"./dist/use-isomorphic-layout-effect.native.esm.js","browser":{"./dist/use-isomorphic-layout-effect.cjs.js":"./dist/use-isomorphic-layout-effect.browser.cjs.js","./dist/use-isomorphic-layout-effect.esm.js":"./dist/use-isomorphic-layout-effect.browser.esm.js"},"scripts":{"test":"echo \"Warning: no test specified\"","build":"preconstruct build","postbuild":"cpy 'src/index.native.ts' . --rename=$npm_package_react_native","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/Andarist/use-isomorphic-layout-effect.git"},"license":"MIT","bugs":{"url":"https://github.com/Andarist/use-isomorphic-layout-effect/issues"},"homepage":"https://github.com/Andarist/use-isomorphic-layout-effect#readme","peerDependencies":{"react":"^16.8.0 || ^17.0.0"},"peerDependenciesMeta":{"@types/react":{"optional":true}},"devDependencies":{"@babel/core":"^7.10.4","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.10.4","@preconstruct/cli":"1.1.14","@types/react":"^16.9.41","cpy-cli":"^3.1.1","husky":"^4.2.5","lint-staged":"^10.2.11","prettier":"^2.0.5","react":"^16.13.1","typescript":"^3.9.5"},"gitHead":"46b03be0782720b506dee3be0b519d6cf7477c0a","_id":"use-isomorphic-layout-effect@1.1.0","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"shasum":"4db2111e0d53ca694187ea5fd5cb2ba610286fe0","size":1416,"noattachment":false,"key":"/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/use-isomorphic-layout-effect/download/use-isomorphic-layout-effect-1.1.0.tgz"},"maintainers":[{"name":"andarist","email":""}],"_npmUser":{"name":"andarist","email":"mateuszburzynski@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-isomorphic-layout-effect_1.1.0_1603706706956_0.9892239314771365"},"_hasShrinkwrap":false,"publish_time":1603706707075,"_cnpm_publish_time":1603706707075},"1.0.0":{"name":"use-isomorphic-layout-effect","version":"1.0.0","description":"A React helper hook for scheduling a layout effect with a fallback to a regular effect for environments where layout effects should not be used (such as server-side rendering).","main":"dist/use-isomorphic-layout-effect.cjs.js","module":"dist/use-isomorphic-layout-effect.esm.js","react-native":"./dist/use-isomorphic-layout-effect.native.esm.js","browser":{"./dist/use-isomorphic-layout-effect.cjs.js":"./dist/use-isomorphic-layout-effect.browser.cjs.js","./dist/use-isomorphic-layout-effect.esm.js":"./dist/use-isomorphic-layout-effect.browser.esm.js"},"scripts":{"test":"echo \"Warning: no test specified\"","build":"preconstruct build","postbuild":"cpy 'src/index.native.ts' . --rename=$npm_package_react_native","prepare":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/Andarist/use-isomorphic-layout-effect.git"},"license":"MIT","bugs":{"url":"https://github.com/Andarist/use-isomorphic-layout-effect/issues"},"homepage":"https://github.com/Andarist/use-isomorphic-layout-effect#readme","peerDependencies":{"react":"^16.8.0"},"peerDependenciesMeta":{"@types/react":{"optional":true}},"devDependencies":{"@babel/core":"^7.10.4","@babel/preset-env":"^7.10.4","@babel/preset-typescript":"^7.10.4","@preconstruct/cli":"1.1.14","@types/react":"^16.9.41","cpy-cli":"^3.1.1","husky":"^4.2.5","lint-staged":"^10.2.11","prettier":"^2.0.5","react":"^16.13.1","typescript":"^3.9.5"},"gitHead":"bb36974f696868d9d703b7027299398403fbcaa4","_id":"use-isomorphic-layout-effect@1.0.0","_nodeVersion":"12.18.1","_npmVersion":"6.14.5","dist":{"shasum":"f56b4ed633e1c21cd9fc76fe249002a1c28989fb","size":1409,"noattachment":false,"key":"/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/use-isomorphic-layout-effect/download/use-isomorphic-layout-effect-1.0.0.tgz"},"maintainers":[{"name":"andarist","email":""}],"_npmUser":{"name":"andarist","email":"mateuszburzynski@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/use-isomorphic-layout-effect_1.0.0_1593524409473_0.47349528788467654"},"_hasShrinkwrap":false,"publish_time":1593524409571,"_cnpm_publish_time":1593524409571}},"readme":"# use-isomorphic-layout-effect\n\nA React helper hook for scheduling a layout effect with a fallback to a regular effect for environments where layout effects should not be used (such as server-side rendering).\n\n## Installation\n\n```sh\n$ npm i use-isomorphic-layout-effect\n```\n\n## Usage \n\nYou only need to switch `useLayoutEffect` with `useIsomorphicLayoutEffect`\n\n```diff\n+ import useIsomorphicLayoutEffect from 'use-isomorphic-layout-effect';\n- import { useLayoutEffect } from 'react';\n\n\nconst YourComponent = () => {\n+  useIsomorphicLayoutEffect(() => {\n-  useLayoutEffect(() => {\n    // your implementation\n  }, []);\n};\n```\n","_attachments":{},"homepage":"https://github.com/Andarist/use-isomorphic-layout-effect#readme","bugs":{"url":"https://github.com/Andarist/use-isomorphic-layout-effect/issues"},"license":"MIT"}