{"_id":"react-lazy-with-preload","_rev":"3923678","name":"react-lazy-with-preload","description":"Wraps the React.lazy API with preload functionality","dist-tags":{"latest":"2.2.1"},"maintainers":[{"name":"ianschmitz","email":"ianschmitz@gmail.com"}],"time":{"modified":"2025-09-01T01:26:57.000Z","created":"2019-11-13T00:20:33.358Z","2.2.1":"2022-08-22T16:36:25.514Z","2.2.0":"2022-07-25T17:27:57.605Z","2.1.0":"2022-06-23T18:29:41.139Z","2.0.1":"2020-06-11T22:22:15.570Z","2.0.0":"2020-01-31T22:01:57.137Z","1.0.0":"2019-11-13T00:20:33.358Z"},"users":{},"author":{"name":"Ian Schmitz","email":"ianschmitz@gmail.com"},"repository":{"type":"git","url":"git+https://github.com/ianschmitz/react-lazy-with-preload.git"},"versions":{"2.2.1":{"name":"react-lazy-with-preload","version":"2.2.1","description":"Wraps the React.lazy API with preload functionality","main":"lib/index.js","types":"lib/index.d.ts","author":{"name":"Ian Schmitz","email":"ianschmitz@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ianschmitz/react-lazy-with-preload.git"},"bugs":{"url":"https://github.com/ianschmitz/react-lazy-with-preload/issues"},"homepage":"https://github.com/ianschmitz/react-lazy-with-preload#readme","keywords":["React","Lazy","Preload"],"scripts":{"build":"tsc -p tsconfig.build.json","lint":"eslint -f codeframe --ext .js,.ts,.tsx src/","test":"jest","test:watch":"npm run test -- --watch"},"devDependencies":{"@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-react":"^7.10.1","@babel/preset-typescript":"^7.10.1","@testing-library/react":"^13.3.0","@types/jest":"^28.1.7","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","babel-jest":"^28.1.3","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-react":"^7.20.0","husky":"^4.2.5","jest":"^28.1.3","jest-environment-jsdom":"^28.1.3","jest-watch-typeahead":"^2.0.0","prettier":"^2.0.5","pretty-quick":"^2.0.1","react":"^18.2.0","react-dom":"^18.2.0","typescript":"~4.7.4"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"gitHead":"e40fd4134f277ed4f813b2a20fffba43947c1754","_id":"react-lazy-with-preload@2.2.1","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"shasum":"241edca4621a6e5f16026eec5ecbe64f4ce9ebd4","size":2834,"noattachment":false,"key":"/react-lazy-with-preload/-/react-lazy-with-preload-2.2.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-lazy-with-preload/download/react-lazy-with-preload-2.2.1.tgz"},"_npmUser":{"name":"ianschmitz","email":"ianschmitz@gmail.com"},"directories":{},"maintainers":[{"name":"ianschmitz","email":"ianschmitz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-lazy-with-preload_2.2.1_1661186185381_0.9983702975679689"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-08-22T16:37:03.944Z","publish_time":1661186185514,"_cnpm_publish_time":1661186185514},"2.2.0":{"name":"react-lazy-with-preload","version":"2.2.0","description":"Wraps the React.lazy API with preload functionality","main":"lib/index.js","types":"lib/index.d.ts","author":{"name":"Ian Schmitz","email":"ianschmitz@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ianschmitz/react-lazy-with-preload.git"},"bugs":{"url":"https://github.com/ianschmitz/react-lazy-with-preload/issues"},"homepage":"https://github.com/ianschmitz/react-lazy-with-preload#readme","keywords":["React","Lazy","Preload"],"scripts":{"build":"tsc -p tsconfig.build.json","lint":"eslint -f codeframe --ext .js,.ts,.tsx src/","test":"jest","test:watch":"npm run test -- --watch"},"dependencies":{},"devDependencies":{"@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-react":"^7.10.1","@babel/preset-typescript":"^7.10.1","@testing-library/react":"^13.3.0","@types/jest":"^26.0.0","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","babel-jest":"^26.0.1","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-react":"^7.20.0","husky":"^4.2.5","jest":"^26.0.1","jest-watch-typeahead":"^0.6.0","prettier":"^2.0.5","pretty-quick":"^2.0.1","react":"^18.2.0","react-dom":"^18.2.0","typescript":"~3.9.5"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"gitHead":"30a2daad3e3520ce8805b18eb05bf18bd7307513","_id":"react-lazy-with-preload@2.2.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"shasum":"07d7ed012dda95e2cb291c95503cf7b749c4d5e1","size":2687,"noattachment":false,"key":"/react-lazy-with-preload/-/react-lazy-with-preload-2.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-lazy-with-preload/download/react-lazy-with-preload-2.2.0.tgz"},"_npmUser":{"name":"ianschmitz","email":"ianschmitz@gmail.com"},"directories":{},"maintainers":[{"name":"ianschmitz","email":"ianschmitz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-lazy-with-preload_2.2.0_1658770077453_0.08643174564988287"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-07-25T17:31:10.630Z","publish_time":1658770077605,"_cnpm_publish_time":1658770077605},"2.1.0":{"name":"react-lazy-with-preload","version":"2.1.0","description":"Wraps the React.lazy API with preload functionality","main":"lib/index.js","types":"lib/index.d.ts","author":{"name":"Ian Schmitz","email":"ianschmitz@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ianschmitz/react-lazy-with-preload.git"},"bugs":{"url":"https://github.com/ianschmitz/react-lazy-with-preload/issues"},"homepage":"https://github.com/ianschmitz/react-lazy-with-preload#readme","keywords":["React","Lazy","Preload"],"scripts":{"build":"tsc -p tsconfig.build.json","lint":"eslint -f codeframe --ext .js,.ts,.tsx src/","test":"jest","test:watch":"npm run test -- --watch"},"dependencies":{},"devDependencies":{"@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-react":"^7.10.1","@babel/preset-typescript":"^7.10.1","@testing-library/react":"^13.3.0","@types/jest":"^26.0.0","@types/react":"^18.0.14","@types/react-dom":"^18.0.5","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","babel-jest":"^26.0.1","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-react":"^7.20.0","husky":"^4.2.5","jest":"^26.0.1","jest-watch-typeahead":"^0.6.0","prettier":"^2.0.5","pretty-quick":"^2.0.1","react":"^18.2.0","react-dom":"^18.2.0","typescript":"~3.9.5"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"gitHead":"bf5ace8807c6e2d1e08fb2c3406d33bc2e79ddf5","_id":"react-lazy-with-preload@2.1.0","_nodeVersion":"16.14.0","_npmVersion":"8.3.1","dist":{"shasum":"35bed3fb34f371d28c3510d429b70e19fc85707f","size":2669,"noattachment":false,"key":"/react-lazy-with-preload/-/react-lazy-with-preload-2.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-lazy-with-preload/download/react-lazy-with-preload-2.1.0.tgz"},"_npmUser":{"name":"ianschmitz","email":"ianschmitz@gmail.com"},"directories":{},"maintainers":[{"name":"ianschmitz","email":"ianschmitz@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-lazy-with-preload_2.1.0_1656008980963_0.3053287855619382"},"_hasShrinkwrap":false,"_cnpmcore_publish_time":"2022-06-23T18:30:32.195Z","publish_time":1656008981139,"_cnpm_publish_time":1656008981139},"2.0.1":{"name":"react-lazy-with-preload","version":"2.0.1","description":"Wraps the React.lazy API with preload functionality","main":"lib/index.js","types":"lib/index.d.ts","author":{"name":"Ian Schmitz","email":"ianschmitz@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ianschmitz/react-lazy-with-preload.git"},"bugs":{"url":"https://github.com/ianschmitz/react-lazy-with-preload/issues"},"homepage":"https://github.com/ianschmitz/react-lazy-with-preload#readme","keywords":["React","Lazy","Preload"],"scripts":{"build":"tsc -p tsconfig.build.json","lint":"eslint -f codeframe --ext .js,.ts,.tsx src/","test":"jest","test:watch":"npm run test -- --watch"},"dependencies":{},"devDependencies":{"@babel/core":"^7.10.2","@babel/preset-env":"^7.10.2","@babel/preset-react":"^7.10.1","@babel/preset-typescript":"^7.10.1","@testing-library/react":"^10.2.1","@types/jest":"^26.0.0","@types/react":"^16.9.36","@types/react-dom":"^16.9.8","@typescript-eslint/eslint-plugin":"^3.2.0","@typescript-eslint/parser":"^3.2.0","babel-jest":"^26.0.1","eslint":"^7.2.0","eslint-config-prettier":"^6.11.0","eslint-plugin-import":"^2.21.2","eslint-plugin-react":"^7.20.0","husky":"^4.2.5","jest":"^26.0.1","jest-watch-typeahead":"^0.6.0","prettier":"^2.0.5","pretty-quick":"^2.0.1","react":"^16.13.1","react-dom":"^16.13.1","typescript":"~3.9.5"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"gitHead":"106c326f8867bac4927c2ceca0d61b67949d7a4e","_id":"react-lazy-with-preload@2.0.1","_nodeVersion":"12.16.1","_npmVersion":"6.13.4","dist":{"shasum":"5b6db529d235362539fb670c85ac568534b4d4ce","size":2680,"noattachment":false,"key":"/react-lazy-with-preload/-/react-lazy-with-preload-2.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-lazy-with-preload/download/react-lazy-with-preload-2.0.1.tgz"},"maintainers":[{"name":"ianschmitz","email":"ianschmitz@gmail.com"}],"_npmUser":{"name":"ianschmitz","email":"ianschmitz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-lazy-with-preload_2.0.1_1591914135448_0.4397504190754187"},"_hasShrinkwrap":false,"publish_time":1591914135570,"_cnpm_publish_time":1591914135570,"_cnpmcore_publish_time":"2021-12-16T18:45:30.546Z"},"2.0.0":{"name":"react-lazy-with-preload","version":"2.0.0","description":"Wraps the React.lazy API with preload functionality","main":"lib/index.js","types":"lib/index.d.ts","author":{"name":"Ian Schmitz","email":"ianschmitz@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ianschmitz/react-lazy-with-preload.git"},"bugs":{"url":"https://github.com/ianschmitz/react-lazy-with-preload/issues"},"homepage":"https://github.com/ianschmitz/react-lazy-with-preload#readme","keywords":["React","Lazy","Preload"],"scripts":{"build":"tsc -p tsconfig.build.json","lint":"eslint -f codeframe --ext .js,.ts,.tsx src/","test":"jest","test:watch":"npm run test -- --watch"},"dependencies":{},"devDependencies":{"@babel/core":"^7.8.4","@babel/preset-env":"^7.8.4","@babel/preset-react":"^7.8.3","@babel/preset-typescript":"^7.8.3","@testing-library/react":"^9.4.0","@types/jest":"^25.1.1","@types/react":"^16.9.19","@types/react-dom":"^16.9.5","@typescript-eslint/eslint-plugin":"^2.18.0","@typescript-eslint/parser":"^2.18.0","babel-jest":"^25.1.0","eslint":"^6.8.0","eslint-config-prettier":"^6.10.0","eslint-plugin-import":"^2.20.0","eslint-plugin-react":"^7.18.0","husky":"^4.2.1","jest":"^25.1.0","jest-watch-typeahead":"^0.4.2","prettier":"^1.19.1","pretty-quick":"^2.0.1","react":"^16.12.0","react-dom":"^16.12.0","typescript":"~3.7.5"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"gitHead":"eb63d4a47a91788a7a558a78b4b147dbaa5bcc95","_id":"react-lazy-with-preload@2.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"shasum":"fba69c87f592a2e59a48d68b6babf8fe7fb4ef48","size":2653,"noattachment":false,"key":"/react-lazy-with-preload/-/react-lazy-with-preload-2.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-lazy-with-preload/download/react-lazy-with-preload-2.0.0.tgz"},"maintainers":[{"name":"ianschmitz","email":"ianschmitz@gmail.com"}],"_npmUser":{"name":"ianschmitz","email":"ianschmitz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-lazy-with-preload_2.0.0_1580508117009_0.9830047333658118"},"_hasShrinkwrap":false,"publish_time":1580508117137,"_cnpm_publish_time":1580508117137,"_cnpmcore_publish_time":"2021-12-16T18:45:30.771Z"},"1.0.0":{"name":"react-lazy-with-preload","version":"1.0.0","description":"Wraps the React.lazy API with preload functionality","main":"lib/index.js","types":"lib/index.d.ts","author":{"name":"Ian Schmitz","email":"ianschmitz@gmail.com"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/ianschmitz/react-lazy-with-preload.git"},"bugs":{"url":"https://github.com/ianschmitz/react-lazy-with-preload/issues"},"homepage":"https://github.com/ianschmitz/react-lazy-with-preload#readme","keywords":["React","Lazy","Preload"],"scripts":{"build":"tsc -p tsconfig.build.json","lint":"eslint -f codeframe --ext .js,.ts,.tsx src/","test":"jest","test:watch":"npm run test -- --watch"},"dependencies":{},"devDependencies":{"@babel/core":"^7.7.2","@babel/preset-env":"^7.7.1","@babel/preset-react":"^7.7.0","@babel/preset-typescript":"^7.7.2","@testing-library/react":"^9.3.2","@types/jest":"^24.0.22","@types/react":"^16.9.11","@types/react-dom":"^16.9.4","@typescript-eslint/eslint-plugin":"^2.7.0","@typescript-eslint/parser":"^2.7.0","babel-jest":"^24.9.0","eslint":"^6.6.0","eslint-config-prettier":"^6.5.0","eslint-plugin-import":"^2.18.2","eslint-plugin-react":"^7.16.0","husky":"^3.0.9","jest":"^24.9.0","jest-watch-typeahead":"^0.4.2","prettier":"^1.19.1","pretty-quick":"^2.0.1","react":"^16.11.0","react-dom":"^16.11.0","typescript":"~3.7.2"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"gitHead":"11a48f464cc65db7eee1ad75591cfe8ba743be2b","_id":"react-lazy-with-preload@1.0.0","_nodeVersion":"10.17.0","_npmVersion":"6.11.3","dist":{"shasum":"ecc8ade7ba79e335f12dc7a40d6b20ac16874eaa","size":2653,"noattachment":false,"key":"/react-lazy-with-preload/-/react-lazy-with-preload-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-lazy-with-preload/download/react-lazy-with-preload-1.0.0.tgz"},"maintainers":[{"name":"ianschmitz","email":"ianschmitz@gmail.com"}],"_npmUser":{"name":"ianschmitz","email":"ianschmitz@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-lazy-with-preload_1.0.0_1573604433202_0.6271335011602324"},"_hasShrinkwrap":false,"publish_time":1573604433358,"_cnpm_publish_time":1573604433358,"_cnpmcore_publish_time":"2021-12-16T18:45:30.982Z"}},"readme":"`react-lazy-with-preload` wraps the `React.lazy()` API and adds the ability to preload the component before it is rendered for the first time.\n\n## Install\n\n```sh\nnpm install react-lazy-with-preload\n```\n\n## Usage\n\n**Before:**\n\n```js\nimport { lazy, Suspense } from \"react\";\nconst OtherComponent = lazy(() => import(\"./OtherComponent\"));\n```\n\n**After:**\n\n```js\nimport { Suspense } from \"react\";\nimport { lazyWithPreload } from \"react-lazy-with-preload\";\nconst OtherComponent = lazyWithPreload(() => import(\"./OtherComponent\"));\n\n// ...\nOtherComponent.preload();\n```\n\nTo preload a component before it is rendered for the first time, the component that is returned from `lazyWithPreload()` has a `preload` function attached that you can invoke. `preload()` returns a `Promise` that you can wait on if needed. The promise is idempotent, meaning that `preload()` will return the same `Promise` instance if called multiple times.\n\nFor more information about React code-splitting, `React.lazy` and `React.Suspense`, see https://reactjs.org/docs/code-splitting.html.\n\n## Example\n\nFor example, if you need to load a component when a button is pressed, you could start preloading the component when the user hovers over the button:\n\n```js\nfunction SomeComponent() {\n    const { showOtherComponent, setShowOtherComponent } = useState(false);\n\n    return (\n        <div>\n            <Suspense fallback={<div>Loading...</div>}>\n                {showOtherComponent && <OtherComponent />}\n            </Suspense>\n            <button\n                onClick={() => setShowOtherComponent(true)}\n                // This component will be needed soon. Let's preload it!\n                onMouseOver={() => OtherComponent.preload()}\n            >\n                Click me to render OtherComponent\n            </button>\n        </div>\n    );\n}\n```\n\n## Acknowledgements\n\nInspired by the preload behavior of [react-loadable](https://github.com/jamiebuilds/react-loadable).\n","_attachments":{},"homepage":"https://github.com/ianschmitz/react-lazy-with-preload#readme","bugs":{"url":"https://github.com/ianschmitz/react-lazy-with-preload/issues"},"license":"MIT"}