{"id":19453704,"url":"https://github.com/ganapativs/react-dynamic-import","last_synced_at":"2025-08-02T19:06:58.606Z","repository":{"id":44850604,"uuid":"154823894","full_name":"ganapativs/react-dynamic-import","owner":"ganapativs","description":"Dynamically load and render any react module(Component or an HOC) using dynamic import 🎉","archived":false,"fork":false,"pushed_at":"2023-01-06T01:51:04.000Z","size":1220,"stargazers_count":28,"open_issues_count":17,"forks_count":6,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-06T20:04:09.758Z","etag":null,"topics":["code-splitting","dynamic","dynamic-import","hoc","library","parcel","performance","react","webpack"],"latest_commit_sha":null,"homepage":"https://codesandbox.io/s/react-dynamic-import-hooks-demo-108-kuf3u","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ganapativs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-10-26T11:26:43.000Z","updated_at":"2023-05-17T04:40:00.000Z","dependencies_parsed_at":"2023-02-05T02:00:57.475Z","dependency_job_id":null,"html_url":"https://github.com/ganapativs/react-dynamic-import","commit_stats":null,"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"purl":"pkg:github/ganapativs/react-dynamic-import","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganapativs%2Freact-dynamic-import","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganapativs%2Freact-dynamic-import/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganapativs%2Freact-dynamic-import/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganapativs%2Freact-dynamic-import/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ganapativs","download_url":"https://codeload.github.com/ganapativs/react-dynamic-import/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ganapativs%2Freact-dynamic-import/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268438728,"owners_count":24250660,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-splitting","dynamic","dynamic-import","hoc","library","parcel","performance","react","webpack"],"created_at":"2024-11-10T17:05:50.606Z","updated_at":"2025-08-02T19:06:58.563Z","avatar_url":"https://github.com/ganapativs.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-dynamic-import\n\n⚠️ You might not need this library. Checkout [`React.lazy`](https://reactjs.org/docs/code-splitting.html#reactlazy) and see if it fits your use case.\n\nDynamically load and render any react module(Component or an HOC) using dynamic import 🎉\n\nTiny(**around 1.16kb gzip**) dynamic module loader and renderer.\n\n👉 [DEMO](https://codesandbox.io/s/react-dynamic-import-hooks-demo-108-kuf3u)\n\n\u003e ⚠️ Hooks only(requires react 16.8.0 or above), use [v1.0.4](https://www.npmjs.com/package/react-dynamic-import/v/1.0.4) if you want older react versions support\n\u003e\n\u003e Dynamic loading of component is already supported in React using React.lazy and Suspense, But, dynamic loading of HOC is tricky and is unsupported in React.\n\u003e\n\u003e Should work with any bundler(eg: webpack, parcel etc) which supports dynamic import ✨\n\n[![MIT Licence](https://badges.frapsoft.com/os/mit/mit.svg?v=103)](https://opensource.org/licenses/mit-license.php)\n[![Open Source Love](https://badges.frapsoft.com/os/v2/open-source.svg?v=103)](https://github.com/ganapativs/react-dynamic-import/)\n[![Build Status](https://travis-ci.com/ganapativs/react-dynamic-import.svg?branch=master)](https://travis-ci.com/ganapativs/react-dynamic-import)\n[![npm version](https://badge.fury.io/js/react-dynamic-import.svg)](https://badge.fury.io/js/react-dynamic-import)\n[![GitHub version](https://badge.fury.io/gh/ganapativs%2Freact-dynamic-import.svg)](https://badge.fury.io/gh/ganapativs%2Freact-dynamic-import) [![Greenkeeper badge](https://badges.greenkeeper.io/ganapativs/react-dynamic-import.svg)](https://greenkeeper.io/)\n\n## Table of Contents\n\n- [Install](#install)\n- [Basic Usage](#basic-usage)\n- [Advanced Usage](#advanced-usage)\n- [API](#api)\n- [Contribute](#contribute)\n- [License](#license)\n\n## Install\n\n### NPM\n\n```sh\nnpm install react-dynamic-import\n```\n\n### Yarn\n\n```sh\nyarn add react-dynamic-import\n```\n\n### UMD build\n\n```html\n\u003cscript src=\"https://unpkg.com/react-dynamic-import/dist/react-dynamic-import.umd.js\"\u003e\u003c/script\u003e\n```\n\n## Basic usage\n\n1. Component\n\n   - **Folder structure**\n\n     ```text\n     |_ realComponent.js\n     |_ container.js \u003c-- working file\n     ```\n\n   - **Usage**\n\n     ```js\n     // Import library\n     import ReactDynamicImport from \"react-dynamic-import\";\n     // or const ReactDynamicImport = require('react-dynamic-import');\n\n     // Define dynamic import loader function\n     const loader = () =\u003e import(`./realComponent.js`);\n\n     /**\n      * Use dynamic module and lazy fetch component\n      *\n      * Make sure to use it outside render method,\n      * else new component is rendered in each render\n      *\n      * You can choose to show a placeholder and render\n      * error component in case of error, check API section for more\n      */\n     const RealComponent = ReactDynamicImport({ loader });\n\n     class Container extends React.component {\n       render() {\n         /**\n          * This component is dynamically fetched and rendered\n          * on first usage/render\n          */\n         return \u003cRealComponent /\u003e;\n       }\n     }\n     ```\n\n1. HOC\n\n   - **Folder structure**\n\n     ```text\n     |_ realComponent.js \u003c-- Real component to wrap in HOC\n     |_ withHOC.js \u003c-- HOC\n     |_ container.js \u003c-- working file\n     ```\n\n   - **Usage**\n\n     ```js\n     // Import library\n     import ReactDynamicImport from \"react-dynamic-import\";\n     // or const ReactDynamicImport = require('react-dynamic-import');\n     import RealComponent from \"./realComponent.js\";\n\n     // Define dynamic import loader function\n     const loader = () =\u003e import(`./withHOC.js`);\n\n     /**\n      * Use dynamic module and lazy fetch HOC\n      *\n      * Make sure to use it outside render method,\n      * else new component is rendered in each render\n      *\n      * You can choose to show a placeholder and render error\n      * component in case of error, check API section for more\n      */\n     const DynamicHOC = ReactDynamicImport({ loader, isHOC: true });\n     const WrappedComponent = DynamicHOC(RealComponent);\n\n     class Container extends React.component {\n       render() {\n         /**\n          * The actual HOC is lazy loaded and executed,\n          * which in turn renders the actual component lazily\n          */\n         return \u003cWrappedComponent /\u003e;\n       }\n     }\n     ```\n\n## Advanced usage\n\n1. Component\n\n   - **Folder structure**\n\n     ```text\n     |_ dynamic\n     |  |_ realComponent-en.js\n     |  |_ realComponent-eu.js\n     |  |_ realComponent-kn.js\n     |_ container.js \u003c-- working file\n     ```\n\n   - **Usage**\n\n     ```js\n     // Import library\n     import ReactDynamicImport from \"react-dynamic-import\";\n     // or const ReactDynamicImport = require('react-dynamic-import');\n\n     /**\n      * Define dynamic import loader function\n      *\n      * This loads specific module from many available\n      * modules in the directory, using given module name\n      */\n     const loader = f =\u003e import(`./dynamic/${f}.js`);\n\n     // Use dynamic module and lazy fetch component\n     class Container extends React.component {\n       constructor(props) {\n         super(props);\n\n         /**\n          * Make sure to use it outside render method, else\n          * new component is rendered in each render\n          *\n          * You can choose to show a placeholder and render error\n          * component in case of error, check API section for more\n          *\n          * This loads different module when different language\n          * configuration is passed\n          */\n         this.RealComponent = ReactDynamicImport({\n           name: `realComponent-${props.lang || \"en\"}`,\n           loader\n         });\n       }\n\n       render() {\n         const { RealComponent } = this;\n\n         /**\n          * This component is dynamically fetched and rendered\n          * on first usage/render\n          */\n         return \u003cRealComponent /\u003e;\n       }\n     }\n     ```\n\n1. HOC\n\n   - **Folder structure**\n\n     ```text\n     |_ dynamic \u003c-- Dynamic HOC's\n     |  |_ withHOC-en.js\n     |  |_ withHOC-eu.js\n     |  |_ withHOC-kn.js\n     |_ realComponent.js \u003c-- Real component to wrap in HOC\n     |_ container.js \u003c-- working file\n     ```\n\n   - **Usage**\n\n     ```js\n     // Import library\n     import ReactDynamicImport from \"react-dynamic-import\";\n     // or const ReactDynamicImport = require('react-dynamic-import');\n     import RealComponent from \"./realComponent.js\";\n\n     /**\n      * Define dynamic import loader function\n      *\n      * This loads specific module from many available\n      * modules in the directory, using given module name\n      */\n     const loader = f =\u003e import(`./dynamic/${f}.js`);\n\n     // Use dynamic module and lazy fetch component\n     class Container extends React.component {\n       constructor(props) {\n         super(props);\n\n         /**\n          * Make sure to use it outside render method, else\n          * new component is rendered in each render\n          *\n          * You can choose to show a placeholder and render error\n          * component in case of error, check API section for more\n          *\n          * This loads different module when different language\n          * configuration is passed\n          */\n         const DynamicHOC = ReactDynamicImport({\n           name: `withHOC-${props.lang || \"en\"}`,\n           loader,\n           isHOC: true\n         });\n         this.WrappedComponent = DynamicHOC(RealComponent);\n       }\n\n       render() {\n         const { WrappedComponent } = this;\n\n         /**\n          * The actual HOC is lazy loaded and executed,\n          * which in turn renders the actual component lazily\n          */\n         return \u003cWrappedComponent /\u003e;\n       }\n     }\n     ```\n\nCheckout [API](#api) for more info.\n\n## API\n\n- [React Dynamic Import](docs/react-dynamic-import.md)\n\n## Contribute\n\nThanks for taking time to contribute, please read [docs](docs) and checkout [src](src) to understand how things work.\n\n### Reporting Issues\n\nFound a problem? Want a new feature? First of all see if your issue or idea has [already been reported](../../issues).\nIf don't, just open a [new clear and descriptive issue](../../issues/new).\n\n### Submitting pull requests\n\nPull requests are the greatest contributions, so be sure they are focused in scope, and do avoid unrelated commits.\n\n- Fork it!\n- Clone your fork: `git clone https://github.com/\u003cyour-username\u003e/react-dynamic-import`\n- Navigate to the newly cloned directory: `cd react-dynamic-import`\n- Create a new branch for the new feature: `git checkout -b my-new-feature`\n- Install the tools necessary for development: `yarn`\n- Make your changes.\n- Commit your changes: `git commit -am 'Add some feature'`\n- Push to the branch: `git push origin my-new-feature`\n- Submit a pull request with full remarks documenting your changes\n\n### TODO\n\n- [ ] Test cases\n\n## License\n\n[MIT License](https://opensource.org/licenses/MIT) © [Ganapati V S](https://meetguns.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fganapativs%2Freact-dynamic-import","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fganapativs%2Freact-dynamic-import","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fganapativs%2Freact-dynamic-import/lists"}